Question

我想在我应用的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;

问题在于styles.className如果我将.className放在LoginElements.css文件中，而不是.register，就会有效。

如何将button属性中的类名用作类，我需要做什么？而且不只是register，而是它像LoginElements__register__34Kfd（本地作用域）？

Answer 1

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

您可以将Button.js更新为

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

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

CSS模块将property作为styles属性传递

1 个答案: