CSS 模块通过属性作为样式属性

Question

我想将自定义 class 添加到我正在学习反应的应用中的 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 文件，而不是我希望的 .register，styles.className 将起作用。

我需要做什么才能将按钮属性中的 class 名称用作 class？不只是 register，而是像 LoginElements__register__34Kfd（局部范围）？

Answer 1

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

你能把 Button.js 更新成

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

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

CSS 模块通过属性作为样式属性

CSS modules pass property as styles property

javascript

css

reactjs

css-modules

CSS 模块通过 属性 作为样式 属性

CSS modules pass property as styles property

javascript

css

reactjs

css-modules

CSS 模块通过属性作为样式属性