CSS-Module übergeben Eigenschaft als Styles-Eigenschaft

Question

Ich möchte eine benutzerdefinierte Klasse zu meiner Button Komponente in der App, die ich lernen reagieren auf.

In meinem Form.js Ich habe

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; 

Und in der Button.js Ich habe

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; 

Das Problem ist, dass styles.className wenn ich .className in meiner LoginElements.css Datei gesetzt wird funktionieren, und nicht .register, wie Ich möchte.

Was muss ich tun, um den Klassennamen aus der button -Eigenschaft als Klasse zu verwenden? Und nicht nur register, sondern so, dass es wie LoginElements__register__34Kfd (lokal begrenzt) ist?

Answer 1

Vielleicht lese ich das nicht richtig, aber ich denke, das Problem ist, dass Sie die Punktnotation verwenden, um auf den Klassennamen von Stilen statt Klammern zuzugreifen.

Können Sie Button.js aktualisieren, um

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

Dot Notation wird nicht className als Variable erkennen, sondern wird es behandeln buchstäblich als Name der Eigenschaft