React 中的 CSS

内联样式

style 接受一个采用小驼峰命名属性的 JavaScript 对象

<h2 style={{color: "red", fontSize: `${titleSize}px`}}>内容</h2>
<p style={{color: "blue", fontSize: "20px"}}>内容</p>

普通的css

        普通的 css 会编写到一个单独的文件，之后再进行引入，普通的css都属于全局的css，样式之间会相互影响。

页面：

import React, { PureComponent } from 'react'
import "./Home.css"

export class Home extends PureComponent {
  render() {
    return (
      <div className='section'>
        <div className='title'>Home的标题</div>
      </div>
    )
  }
}

export default Home

样式：

.section {
  border: 1px solid skyblue;
}

css modules

        css modules并不是React特有的解决方案，而是所有使用了类似于 webpack配置的环境 下都可以使用的，React 的脚手架已经内置了css modules的配置。 .css/.less/.scss 等样式文件 都需要 修改成 .module.css/.module.less/.module.scss 等。

页面：

import React, { PureComponent } from 'react'

import appStyle from "./App.module.css"

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={appStyle.title}>标题</h2>
        <p className={appStyle.content}>内容</p>
      </div>
    )
  }
}

export default App

样式：App.module.css

.title {
  font-size: 32px;
  color: green;
}

.content {
  font-size: 22px;
  color: orange;
}