javascript – ReactJS：用自己的css创建隔离组件

2023年3月9日 323次阅读

我正在尝试开发一个reactjs组件库,以便可以通过不同的项目重用.

除了功能本身之外,这些组件必须具有不同css样式的主题.

我可以编写一个css文件,但是我必须在每个项目中导入css,我将使用任何组件.我需要在其自身内部设置这些组件的样式,所以当我在其他项目中导入它时,我将看起来完全符合我的预期.

是否有任何ReactJS库(或插件可能？)在组件内部编译这些样式或者可能在componentDidMount上应用样式？

编辑

我忘了补充说我正在使用MaterialUI.这是一个实现React Material Design的框架.

它提供了它拥有样式的不同组件,我可以修改它们中的一些,但不是全部.

由于Material UI创建了一个大HTML,我无法添加内联样式,这就是为什么我需要添加一个选择器来直接从React应用样式

Meterial UI提供类似的东西,所以我想是可能的.这是我在Material UI中配置的方式

const muiTheme = getMuiTheme({
  palette: {
    textColor: cyan500,
  },
  appBar: {
    height: 50,
  },
});

可悲的是,这只支持一些风格,而不是我所需要的

最佳答案 如果使用webpack进行转换,则可以为组件创建单独的样式表,然后将其导入.

例：

import './componentStyle.css';

然后在该CSS中设置组件样式.每次在不同的项目中使用它们时,组件都需要jsx和css文件,但是如果需要,您可以轻松地为每个项目自定义css,并且可以使用css类而不是内联样式.

你的webpack.config.js需要这个：

module: {
  loaders: [
    {test: /\.css$/, loader: 'style-loader!css-loader'}
  ]
}
点赞