我想将自定义类添加到我正在学习 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
(局部范围)?
最佳答案
也许我没有正确阅读,但我认为问题在于您使用点表示法从样式而不是括号访问类名。
你能更新 Button.js 到
<div className={className? styles[className] : styles.button}
点符号将无法识别 className
作为变量,而是将其按字面意思视为属性名称
关于javascript - CSS 模块将属性作为样式属性传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45200140/