javascript - ReactJS:使用自己的 CSS 创建独立组件

Question

我正在尝试开发一个 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,
  },
});

遗憾的是，它只支持部分样式，并不是我需要的所有样式

Answer 1

如果您使用 webpack 进行转译，您可以为组件创建一个单独的样式表，然后导入它。

例子:

import './componentStyle.css';

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

你的 webpack.config.js 需要有这个:

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