React的CSS方式

qian端小酱
107 阅读1分钟

1. 内联样式

  • style 采用小驼峰命名属性的 JavaScript 对象。可以引用state中的状态来设置相关的样式。
  • 内联样式, 样式之间无冲突。但某些样式无法编写(比如伪类/伪元素)。
<p align=left>   <h2 style={{color: "red", fontSize: `${titleSize}px`}}>我是标题</h2></p>
<p align=left>   <p style={{color: "blue", fontSize: "20px"}}>我是内容, 哈哈哈</p></p>

2. 普通的css

  • 编写到一个单独的文件，再进行引入。但是普通的css都属于全局的css，样式之间会相互影响，这种编写方式最大的问题是样式之间会相互层叠掉。而组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响。

3. css modules

  • css modules并不是React特有的解决方案，所有使用了类似于webpack配置的环境下都可以使用。 比如配置webpack.config.js中的modules: true等。React的脚手架已经内置了css modules的配置。**.css/.less/.scss **等样式文件都需要修改成 .module.css/.module.less/.module.scss 等。
// 引入
import homeStyle from "./Home.module.css"

// 使用
<div className={homeStyle.title}>Home的标题</div>

最终的页面效果如下，文件前缀_class名_动态哈希值，来保证当前class的唯一性。 1.png

  • 注意：css modules解决了局部作用域的问题，但其也有缺陷：
  1. 引用的类名，不能使用连接符(.home-title)，在JavaScript中不识别。
  2. 所有的className都必须使用{style.className} 的形式来编写。
  3. 不方便动态修改某些样式，依然需要使用内联样式的方式；

4. CSS in JS（推荐，由第三方库提供）

  • React的思想认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。而样式也属于UI。即：
HTML + CSS = UI
JSX -> HTML in JS
CSS => CSS in JS

所以React被人称之为 All in JS。

  • “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态。
  • CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等。虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点。
  • 目前比较流行的CSS-in-JS的库有styled-components、emotion、glamorous。

（1）styled的基本使用

  • styled-components的本质是通过函数的调用（标签模板字符串），最终创建出一个组件：这个组件会被自动添加上一个不重复的class，styled-components会给该class添加相关的样式。
  • 它支持类似于CSS预处理器一样的样式嵌套：支持直接子代选择器或后代选择器，并且直接编写样式；可以通过**&符号**获取当前元素；直接伪类选择器、伪元素等。

（2）props可以被传递给styled组件

获取props需要通过${}传入一个插值函数，props会作为该函数的参数，这种方式可以有效的解决动态样式的问题。

（3）添加attrs属性，设置默认属性

import styled from "styled-components";
import { primaryColor, largeSize } from "./style/variables";

// 1.基本使用
export const AppWrapper = styled.div`
  .footer {
    border: 1px solid orange;
  }
`;

// 2.子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供属性
// 5.从一个单独的文件中引入变量
export const SectionWrapper = styled.div.attrs((props) => ({
  tColor: props.color || "blue",
}))`
  border: 1px solid red;

  .title {
    font-size: ${(props) => props.size}px;
    color: ${(props) => props.tColor};

    &:hover {
      background-color: purple;
    }
  }

  .content {
    font-size: ${largeSize}px;
    color: ${primaryColor};
  }
`;

  render() {
    const { size } = this.state;

    return (
      <AppWrapper>
        <SectionWrapper size={size}>
          <h2 className="title">标题</h2>
          <p className="content">内容</p>
          <button onClick={(e) => this.setState({ color: "skyblue" })}>
            修改颜色
          </button>
        </SectionWrapper>
        
        <div className="footer">
          <p>免责声明</p>
          <p>版权声明</p>
        </div>
      </AppWrapper>
    );
  }

（4）styled高级特性

  • 设置主题，ThemeProvider。通过这种方式，任意共享项目中所有变量。
import { ThemeProvider } from "styled-components";
...
<ThemeProvider theme={{ color: "purple", size: "50px" }}>
  <App />
</ThemeProvider>
...
...
// 使用
.header {
  color: ${props => props.theme.color};
  font-size: ${props => props.theme.size};
 }
  • 支持样式的继承
const Button = styled.button`
  border: 1px solid red;
  border-radius: 5px;
`

export const ButtonWrapper = styled(Button)`
  background-color: #0f0;
  color: #fff;
`

（5）第三方库：classnames

  • 通过一些逻辑，动态添加classnames。
import classNames from 'classnames'
...
...
<h2 className={classNames("a", { b:isb, c:isc })}>1</h2>
<h2 className={classNames(["a", { b: isb, c: isc }])}>2</h2>
avatar
文章
阅读
粉丝