Skip to content

export-classes.md

Latest commit

 

History

History
46 lines (33 loc) · 939 Bytes

export-classes.md

File metadata and controls

46 lines (33 loc) · 939 Bytes

How to import CSS classes and use them in a component

Let's say we have a layout.css file:

.Content {
    margin-top: 16px;
}

In order to use the Content rule, we can import classes right into the component:

import classes from './Layout.css';

const layout = (props) => (
    <div className={classes.Content}>
        {props.children}
    </div>
);

export default layout;

Since the CSS file has been processed (optimized), the output class name was _2jRP1cgez_J6jwdMTdOBui.

Output HTML markup:

<div class="_2jRP1cgez_J6jwdMTdOBui">
    <p>Test</p>
</div>

If you are wondering what classes actually is, then let me answer that it is just a plain object:

{
    Content: "_2jRP1cgez_J6jwdMTdOBui"
}

By default, neither the react nor the app does not throw any errors if the CSS rule does not exist.

References: