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

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创建隔离组件

修改

3 个答案: