ReactJS: Create isolated component with own css

Question

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

sorry, forgot that part. I'm using materialUI (material-ui.com) for some of that elements, which has it own stylesheets and full HTML rendered inside that library. I can add a class or inline-style to the main container of that compoents, but I cannot go deeper with the inline styles — Pablo
– Pablo, Commented Mar 31, 2016 at 14:46
so you absolutely need to somehow import css FILES into your component is what you're saying? — ZekeDroid
– ZekeDroid, Commented Mar 31, 2016 at 14:52
Yes import css in the component. Or maybe apply style some how as jquery does $('selector').css({...}) is there anything like that for React? — Pablo
– Pablo, Commented Mar 31, 2016 at 14:53

Sanna Keller-Heikkila · Accepted Answer · 2016-03-31 14:55:31Z

1

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

answered Mar 31, 2016 at 14:55

Sanna Keller-Heikkila

2,5946 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Hancock Over a year ago

As far as I can tell this doesn't isolate the CSS. It applies everywhere unless you use some sort of custom naming convention.

Valeriy · Accepted Answer · 2019-03-31 15:05:08Z

1

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

Import your styles from *.module.css file. Example: import styles from './component.module.css' with content .ssss { color: red }
Apply your style using {styles.ssss}. Example: <div className={styles.ssss}>

answered Mar 31, 2019 at 15:05

Valeriy

1,4453 gold badges22 silver badges47 bronze badges

Comments

lazarusleroux · Accepted Answer · 2019-03-08 23:27:57Z

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);

Collectives™ on Stack Overflow

ReactJS: Create isolated component with own css

EDIT

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related