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模塊將屬性作爲樣式屬性

回答

相關問題