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

Question

我正在尝试开发一个 reactjs 组件库，以便可以被不同的项目重用。

此组件除了功能本身外，还必须有一个具有不同 css 风格的主题。

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

是否有任何 ReactJS 库（或插件？）可以在组件内编译此样式或在 componentDidMount 上应用样式？

编辑

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

它提供了自己的样式的不同组件，我可以修改其中的一些，但不是全部。

由于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'}
  ]
}

Answer 2

MaterialUI 现在包含 CSS-in-JS docs 功能，可让您按要求进行操作。

您可能想做一些像他们 suggest 那样的事情，并利用他们的 HOC API：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

Answer 3

如果您使用 npx create-react-app 创建了应用程序，那么

从 *.module.css 文件导入您的样式。示例：import styles from './component.module.css' 内容为 .ssss { color: red }
使用 {styles.ssss} 应用您的风格。示例：<div className={styles.ssss}>

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

ReactJS: Create isolated component with own css

javascript

css

dom

reactjs

material-ui

编辑