Question

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

只想知道哪种方法适合什么需求..

Answer 1

可以选择使用styled-componenents，emotion或其他CSS-in-JS框架。我认为这是一个好的开始。在样式化组件中看起来像这样。

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

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

它非常简单，所以我认为从那里开始是个不错的选择。我个人的选择是使用CSS模块（与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和mixins，同时仍然可以像定义样式组件中那样对classNames进行范围划分。这些将是我推荐的选项。

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

回应样式最佳实践。全局或组件级别

1 个答案: