Skip to content

Instantly share code, notes, and snippets.

@markdalgleish
Last active August 29, 2015 14:22
Show Gist options
  • Save markdalgleish/fa641471a222fa598acc to your computer and use it in GitHub Desktop.
Save markdalgleish/fa641471a222fa598acc to your computer and use it in GitHub Desktop.
CSS Modules: Terribly over-engineered scoped tag classes
import styles from './MyComponent.css';
import React, { Component } from 'react';
import { tag } from 'react-css-modules';
const { DIV, H1, H2, P, EM } = tag(styles);
export default class MyComponent extends Component {
render() {
<DIV>
<H1>Heading</H1>
<H2>Subheading</H2>
<P>Paragraph with <EM>emphasis</EM>.</P>
</DIV>
}
};
.DIV {
padding: 20px;
}
.H1 {
font-size: 32px;
}
.H2 {
font-size: 24px;
}
.P {
font-size: 16px;
}
.EM {
font-style: italic;
font-weight: bold;
}
modules.exports = {
tag: function(styles) { /* magic goes here... */ }
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment