CSS模块将属性作为样式属性

我想将自定义类添加到我正在学习的应用中的我的Button组件中。CSS模块将属性作为样式属性

在我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会工作，如果我在LoginElements.css文件把.className，而不是.register，如我想要。

我需要做什么才能将按钮属性中的类名用作类？而不仅仅是register，但它就像LoginElements__register__34Kfd（本地范围）？

来源

2017-07-19 dingo_d

如果你'的className = {风格[className]}'那么你将从'LoginElements.css'获得'.register'类。那是你的追求？ – mrmcgreg

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

您可以更新Button.js到

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

点标记不会承认className作为一个变量，而是将真正地把它作为属性名

来源

2017-07-19 20:19:35

就是这样！我忘了把它当作一个普通物体来对待！谢谢！ –

CSS模块将属性作为样式属性

回答

相关问题