我正在研究 react 。通常我所做的是将我所有的样式设置在一个单独的文件中，也就是 global . 我读到还有其他一些方法，例如 JS 中的组件级样式或 css，但无法确定我应该使用哪一种？
只是想知道哪种方式适合什么需要..
可以选择使用styled-components、emotion或其他 CSS-in-JS 框架之类的东西。我认为这些都是一个好的开始。这在样式组件中看起来像这样。
const StyledDiv = styled.div`
border: 1px solid red;
`
// react code
return <StyledDiv>Content</StyledDiv>
它非常简单，所以我认为从那里开始是一个不错的选择。我个人的选择是使用 CSS-Modules (with 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 中的部分和混合，同时仍然像在样式组件中一样限定类名。这些将是我推荐的选项。
回答你的问题。我不建议使用全局样式，这可能会导致样式设置和覆盖不同样式的多个问题。组件范围更好。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句