时间戳

首页 > 解决方案 > React 样式最佳实践。全局或组件级别

reactjs - React 样式最佳实践。全局或组件级别

问题描述

我正在做反应。通常我所做的是将我所有的样式设置在一个单独的文件中，也就是 global 。我读到还有其他一些方法，如 JS 中的组件级样式或 css，但无法得出结论我应该使用哪一个？

只是想知道哪种方式适合什么需要..

标签： reactjs

解决方案

可以选择使用样式组件、情感或其他 CSS-in-JS 框架。我认为这些都是一个好的开始。这在样式组件中看起来像这样。

const StyledDiv = styled.div`
  border: 1px solid red;
`

// react code
return <StyledDiv>Content</StyledDiv>

它非常简单，所以我认为从那里开始是一个不错的选择。我个人的选择是使用 CSS-Modules（带有 Scss）。Create-React-App 确实支持它。你所做的就是编写普通的 CSS 或 SCSS 并导入它。Webpack 将从这些 CSS 文件中生成作用域类名。看起来像这样。

// styles.module.scss
.StyledDiv {
  border: 1px solid red;
}

// component.js
import styles from './styled.module.scss'

return <div className={styles.StyledDiv}> content </div>

这允许您仍然使用 Sass 中的 partials 和 mixin，同时仍然像在 styled-components 中一样对 className 进行限定。这些将是我推荐的选项。

回答你的问题。我不建议使用全局样式，这可能会导致样式和覆盖不同样式的多个问题。组件范围更好。

推荐阅读