Ggtcf

I'm trying to develop a library of reactjs components in order to be reusable by different projects.

This components besides the functionality itself, must have a theme with different css styles.

I could write a css file, but then I must import the css in every project I will use any of that components. I need to set the style of this components inside itself, so when I import it in other project, I will looks exactly as I expect.

Is there any ReactJS library (or plugin perhaps?) to compile this styles inside the component or maybe apply a style on the componentDidMount?

EDIT

I forgot to add that I'm using MaterialUI. which is a framework that implements Material Design for React.

It provides different components which it own styles, and I can modify some of them, but not all.

Since Material UI create a big HTML I cannot add inline styles, that's why I need to add a selector to apply styles from React directly

Meterial UI provides something like that, so I guess is possible. This is how I configure in Material UI

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

Sadly only some styles are supported by this, and not all I need

If you use webpack for your transpiling, you can create a separate stylesheet for the component and then import it.

Example:

import './componentStyle.css';

Then setup your component style in that CSS. The component would need both the jsx and css files each time you use them in different projects, but you can easily customize the css for each project if you need, and you can use css classes instead of inline styles.

Your webpack.config.js would need to have this:

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

MaterialUI now includes CSS-in-JS docs functionality that will allow you to do just what you're asking.

you probably want to do something like what they suggest and make use of their 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);

If you created application with npx create-react-app then

1. Import your styles from *.module.css file. Example: import styles from './component.module.css' with content .ssss color: red
   


2. Apply your style using styles.ssss. Example: <div className=styles.ssss>