If I have a react component and I want to pass in a className, how do I do this with CSS Modules. It currently just gives the className but not the hash generated css module name which I would get for
<div className={styles.tile + ' ' + styles.blue}>
Here is my Tile.js component
import React, { Component } from 'react';
import styles from './Tile.css';
class Tile extends Component {
render() {
return (
<div className={styles.tile + ' ' + this.props.color}>
{this.props.children}
</div>
);
}
};
export default Tile;
Tile.css
@value colors: "../../styles/colors.css";
@value blue, black, red from colors;
.tile {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.black {
background-color: black;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
So as you can see I initialize this Tile wrapper component as follows in my Author Tile, but I want to pass a color prop into the component:
AuthorTile.js
return (
<Tile orientation='blue'>
<p>{this.props.title}</p>
<img src={this.props.image} />
</Tile>
);
To pass class names as props to a React component:Pass a string containing the class names as a prop. Destructure the prop in the child component. Assign the class names to an element, e.g. <h2 className={className}>Content</h2> .
We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties. They are useful when you want the flow of data in your app to be dynamic.
To import a CSS Module into the corresponding component, import the css modules stylesheet as styles or [name]Styles : In JSX, use the defined CSS class as a className prop like so: From here, you can add as many other CSS modules you'd like, just remember to import each as a different name.
Explanation: The only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of class attribute.
From the docs:
Avoid using multiple CSS Modules to describe a single element. https://github.com/gajus/react-css-modules#multiple-css-modules
@value colors: "../../styles/colors.css";
@value blue, black, red from colors;
.tile {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.black {
composes: tile;
background-color: black;
}
.blue {
composes: tile;
background-color: blue;
}
.red {
composes: tile;
background-color: red;
}
Then <div className={styles[this.props.color]}
should do the job, e.g:
render: function(){
// ES2015
const className = styles[this.props.color];
// ES5
var className = '';
if (this.props.color === 'black') {
className = styles.black;
}
return (
<div className={className}>
{this.props.children}
</div>
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With