javascript - CSS 模块将属性作为样式属性传递

Question

我想将自定义类添加到我正在学习 react 的应用程序中的 Button 组件。

在我的 Form.js 中有

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;

在 Button.js 中我有

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;

问题是如果我将 .className 放在我的 LoginElements.css 文件中，styles.className 将起作用，而不是 .register，如我所愿。

要将按钮属性中的类名用作类，我需要做什么？不仅仅是 register，而是像 LoginElements__register__34Kfd(局部范围)？

Answer 1

也许我没有正确阅读，但我认为问题在于您使用点表示法从样式而不是括号访问类名。

你能更新 Button.js 到

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

点符号将无法识别 className作为变量，而是将其按字面意思视为属性名称