Question

我正在使用sass通过为每个组件导入已编译的CSS来对组件进行样式设置，这将无法动态设置样式或缩放比例

上下文：

我为主要应用程序组件提供了一个主样式表，其中包含带有媒体查询和不同自定义列大小的响应UI类。我不想在主要组件的每个子组件上重复这些类……只是为了确保每个组件都可以访问它们…………我在对待组件样式时是否以错误的方式做出反应？

我还如何让我的子组件继承CSS类？我必须把它们当作道具吗？我觉得有更好的方法来解决这个问题...

动态更改全局样式状态时会如何保持？

Answer 1

我正在使用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 文件（例如app.scss）创建一个 scss 文件夹。在 app.scss 中，您 @import 其他所有可以继承变量等的 scss 文件。然后将 app.scss 导入您的 index.js

Answer 2

我找到了一个适合我的解决方案，正如Basile所建议的那样，我正在使用情感css-in-js库，其中样式已放入样式化组件中。情感带有一种主题化机制，可以动态设置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/>
)}

在react中动态设置子组件的样式

2 个答案: