我正在使用 sass 通过为每个组件导入已编译的 css 来设置组件的样式，这不会很好地动态设置样式或缩放
上下文：
我有一个主应用程序组件的主样式表，其中包含具有媒体查询和不同自定义列大小的响应式 UI 类。我不想在主组件的每个子组件中重复这些类...只是为了确保每个都可以访问它们...我是否以错误的方式处理组件样式？
我如何让我的子组件继承 css 类？我必须将它们作为道具传递吗？我觉得有更好的方法来解决这个问题......
动态更改全局样式状态时如何保持全局样式状态？
【问题讨论】：
我正在使用 sass 通过导入已编译的 css 来设置我的组件的样式 每个组件
我不推荐这种方法。 React 是用 Webpack 编译的。如果您使用 create-react-app 来初始化您的新项目，您只需将任何 .scss 文件导入到您的 index.js 中，Webpack 会将其编译为 .css 文件并在构建时将其注入到您的 HTML 中。如果你这样做，你可以在你的 React 应用程序的任何地方使用任何 css 类。
更多信息在这里：https://scotch.io/tutorials/using-sass-in-create-react-app-v2
在这里：https://create-react-app.dev/docs/adding-a-sass-stylesheet
P.s.：我建议您在 src 中创建一个 scss 文件夹，其中包含一个主 scss 文件（例如 app.scss）。在 app.scss 你 @import 你所有其他可以继承变量的 scss 文件等等。然后将 app.scss 导入到你的 index.js
【讨论】：
我找到了一个对我有用的解决方案，正如 Basile 所建议的那样，我正在使用情感 css-in-js 库，其中样式进入样式化组件。 Emotion 带有一个主题机制来动态设置 CSS 样式，并保持全局样式。
css-in-js 样式的组件
const MButton = styled.button`
background-color: ${(props) => props.theme.colors.primarycolor};//using theme
border: 3px solid $color;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
-ms-border-radius: 20px 20px 20px 20px;
-o-border-radius: 20px 20px 20px 20px;
`;
export default class index extends Component { ... your component
对于全局样式和主题，我使用了情绪主题、主题提供程序和全局组件。我在一个单独的文件中定义我的主题，导入它，应用
const makeGlobalStyles = (theme) => css` any additional global styling not dependent on differing themes in theme`;
//supply styles to global component which manages global theme style state
const GlobalStyles = withTheme(({ theme }) => (
<Global styles={makeGlobalStyles(theme)} />
));
将主题存储为应用程序主组件中的状态...
this.state = {
viewState: "DARK",
theme: theme.DARK,//use a method to change these states to then change the theme styles used across the app
然后向所有使用它的组件实时提供主题状态
render(){
const {viewState,theme} = this.state;
return(
<ThemeProvider theme={theme}>
<GlobalStyles />
any logic for your application, pass prop theme to components to dynamically style to the theme
<SomeComponent theme={theme}/>
<ThemeProvider/>
)}
【讨论】：