CODEWITHSUNDEEP
javascriptcssreactjscss-modules
dingo_d
dingo_d

Reputation: 11670

CSS modules pass property as styles property

I'd like to add a custom class to my Button component in app I'm learning react on.

In my Form.js I have

import React, {Component} from 'react';
import Button from './Button';
import styles from '../css/LoginElements.css';

class Form extends Component {
  render() {

    const click = this.props.onSubmit;

    return(
      <div className={styles.form}>
        <Button
          name="Register"
          className="register"
          onClick={click} />
      </div>
    );
  }
}

export default Form;

And in the Button.js I have 

import React from 'react';
import styles from '../css/LoginElements.css';

const Button = ({name, onClick, className }) => (
  <div className={styles.wrapper}>
    <div className="field">
      <div className={className? styles.className : styles.button} onClick={onClick}>{name}</div>
    </div>
  </div>
);

export default Button;

The problem is that styles.className will work if I put .className in my LoginElements.css file, and not .register, as I would like.

What do I need to do to use the class name from the button property as a class? And not just register but so that it's like LoginElements__register__34Kfd (locally scoped)?

Upvotes: 3

Views: 1155

Answers (1)

Jordan Bonitatis
Jordan Bonitatis

Reputation: 1547

Maybe I'm not reading this correctly, but I think the problem is that you're using dot notation to access the className from styles instead of brackets.

Can you update Button.js to

<div className={className? styles[className] : styles.button}

Dot notation will not recognize className as a variable but instead will treat it literally as the property name

Upvotes: 2

Related Questions