How to pass global CSS/JS to components? - reactjs

Question

I have components with some styles:
const styles = () => ({
rootPaper: {
marginBottom: '25px',
paddingTop: 0,
},
});
...
render() {
const { classes } = this.props;
<Paper className={styles.rootPaper} elevation={4}></Paper>
...
export default withStyles(styles)(...)
And it works. This code is repeated in some components so I want to exclude this as a separate JS file:
const globalCss = {
rootPaper: {
marginBottom: '25px',
paddingTop: 0,
},
hidden: {
display: 'none',
},
};
export default globalCss;
and import that file like that:
import globalCss from '../../styles/globalCss';
...
<Paper className={globalCss.rootPaper} elevation={4}>
But when I want to use this in className it doesn't work(no errors). Used React v16 and Material-ui-next beta 20. How Can I move the same classes to one file and use it in different components?

Answer 1

I'm not sure how your 1st example actually works (as you mentioned).
You are not really invoking the styles function.
You should pass this kind of object to the style prop and not to
the className prop (which accepts a string).
As for your second example, it should work if you will pass it to the style prop instead of the className prop, for reasons I mentioned above.
Running example:
const globalCss = {
rootPaper: {
marginBottom: '25px',
paddingTop: 0,
color: 'red'
},
hidden: {
display: 'none',
},
};
const App = () => (
<div style={globalCss.rootPaper}>
<h2>I got some styles!</h2>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>