Skip to content

Instantly share code, notes, and snippets.

@necolas
Last active November 4, 2015 00:05
Show Gist options
  • Save necolas/1ac943f72f2cfbcbbb9e to your computer and use it in GitHub Desktop.
Save necolas/1ac943f72f2cfbcbbb9e to your computer and use it in GitHub Desktop.
CSS-in-JS to CSS
import React from 'react';
import styles from './styles.css.js';
class Button extends React.Component{
render() {
return (
<button className={styles.button}>
<span className={styles.icon} />
Button
</button>
);
}
}
export default Button;
/* same output as css-loader's :local() provides */
.hash1 {
align-items: center;
background: blue;
color: red;
}
.hash2 {
align-items: center;
color: red;
}
import theme from '../theme';
const styles = {
button: {
alignItems: 'center',
background: theme.background,
color: theme.color
},
icon: {
alignItems: 'center',
color: theme.color
}
};
export default styles;
@adamdicarlo
Copy link

I dig this style - is this related to what you're doing with react-web-sdk? I'd love to use this as an alternative to css-loader?modules ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment