Pablo Pablo - 3 years ago 102
Javascript Question

ReactJS: Create isolated component with own css

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

Answer Source

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'}
  ]
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download