using css modules in react how can I pass a className as a prop to a component

Question

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>
);

romseguy · Accepted Answer · 2015-12-03 08:47:36Z

26

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>
}

edited Dec 3, 2015 at 8:47

answered Dec 2, 2015 at 6:16

romseguy

1,56313 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

svnm Over a year ago

How do you propose having multiple color backgrounds for this Tile component, which can be defined when you initialize it?

svnm Over a year ago

What you have done is not a bad approach to using composition with css modules, but still my main concern is how do I use the passes in color for the Tile, e.g. <Tile color='black'> How does this translate in the Tile? <div className={this.props.color}> is not going to work because it expects {styles.blue} not blue which would become something like components_Tile__blue__abc5436

romseguy Over a year ago

If you're using ES2015 <div className={styles[this.props.color]} should do the job. If not, just check for this.props.color value e.g var className = ''; if (this.props.color === 'black') { className = styles.black; }.

svnm Over a year ago

<div className={styles[this.props.color]} did it. You are awesome, if you answer with this I can mark it as accepted. I actually thought about doing this but messed the syntax up first time around. Thanks

Karl Hofmann Over a year ago

if I am using ES5 or 6 and I have e.g. 10 classnames, do I have to check through all of them to create the right styles.x ? Isn't there any better way to solve this problem?

|

Collectives™ on Stack Overflow

using css modules in react how can I pass a className as a prop to a component

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related