样式化的组件反应原生

在 React 中，我们可以使用组件来创建可重复使用、模块化的 UI 元素，但是组件本身并没有提供样式的能力。我们可以使用 CSS 和样式框架（如 Bootstrap）来添加样式，但是这些方式与组件的模块化和可重用性相矛盾。

为了解决这个问题，出现了许多支持样式化组件的解决方案，其中比较流行的是 Styled-components 和 CSS modules。

Styled-components

• 简介

Styled-components 是一个用于样式化 React 组件的库。它利用模板字符串语法，将 CSS 样式直接嵌入到组件中，使得样式与组件紧密耦合。由于 Styled-components 采用样式覆盖的方式，因此具有样式隔离的特性，不会影响其他组件的样式。

• 优点

  • 提供了一种在组件级别样式化的方式
  • 具有样式隔离的特性
  • 支持服务端渲染和动态的主题（Theming）

• 例子

import styled from 'styled-components'

const Button = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : 'white'};
  color: ${props => props.primary ? 'white' : '#008CBA'};
  font-size: 16px;
  border: 2px solid #008CBA;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
`

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  )
}

CSS Modules

• 简介

CSS Modules 是一种处理 CSS 的模块化方案。它通过在编译时将 CSS 文件转换成局部作用域的类名，并将类名作为对象导出，使得样式与组件绑定。由于 CSS Modules 采用类名覆盖的方式，因此具有样式隔离的特性，不会影响其他组件的样式。

• 优点

  • 提供了一种在组件级别样式化的方式
  • 具有样式隔离的特性
  • 支持服务端渲染

• 例子

import styles from './Button.module.css'

const Button = ({ primary, children }) => {
  return (
    <button className={primary ? styles.primary : styles.secondary}>
      {children}
    </button>
  )
}

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  )
}

总结

样式化的组件反应原生是一种处理样式的模块化方案，能够提高组件的可重用性，并具有样式隔离的特性。在选择使用哪种方案时，需要根据项目的需求和个人偏好进行选择。