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;

问题在于，如果我在我的LoginElements.css文件中添加.className而不是.register，那么styles.className就可以正常工作。

我需要做什么才能将按钮属性中的类名用作类？而且不仅是register，而是像LoginElements__register__34Kfd（本地作用域）这样的类名？

- dingo_d

---

如果你使用 className={styles[className]}，那么你将会从 LoginElements.css 中获取 .register 类。这是你想要的吗？ - mrmcgreg

Answer 1

也许我没有正确理解，但我认为问题在于您正在使用点符号从样式中访问className，而不是使用方括号。

您能否更新Button.js如下：

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

点符号不会将className识别为变量，而是将其视为属性名称。

- Jordan Bonitatis

---

就是这样！我忘记把它当作一个普通对象来处理了！谢谢！ - dingo_d