CSS模塊，反應和覆蓋CSS類

我正在使用一個React組件庫（React Toolbox），它使用CSS模塊和Webpack在它們的Tab組件中輸出這個類：label___1nGy active___1Jur tab___Le7Ntab是我傳遞下來的className prop。該label和active類是從圖書館來了。我想申請一組不同的樣式上active，像.tab.active其中tab指的是我所創建的風格和active匹配生成的選擇庫中已經創造，但無法弄清楚如何使用CSS模塊做到這一點。我需要重寫這個動態的選擇：.label___1nGy.active___1Jur。CSS模塊，反應和覆蓋CSS類

[ CSS ] 2 [ React ] 3

來源

2016-02-04 Joe Bruno

你能告訴我們一個你的代碼的小例子嗎？用代碼更新了 – cocoa

。 –

我想修改反應工具箱組件比重寫動態生成的類名更容易... 或者您可以使用React Toolbox Webpack Loader https://github.com/react-toolbox/react-toolbox#customization – fl0cke

老的文章，但仍然具有現實意義，因此增加一個答案，以幫助那些有類似的問題

雖然不是天生可能在CSS模塊獨自一人，該反應-工具箱庫的作者其實已經解決了這個特殊的問題非常漂亮

閱讀他們的GitHub的文檔這是更深入的主題，在https://github.com/react-toolbox/react-toolbox#customizing-components

特定組件的主題化類的列表是組件演示頁上給出他們的網站上也

在你的情況，以及通過類名稱的標籤，你也將創建一個主題，類，覆蓋默認的主題的該期望部分，並傳遞作爲theme支柱。例如一些考勤記錄的行...

MyComponentWithTabs.css

.tab { 
    color: white; 
}

MyTabTheme.css

.active { 
    color: hotpink; 
}

MyComponentWithTabs。JS

import styles from './MyComponentWithTabs.css' 
import tabTheme from './MyTabTheme.css' 

// blah blah... 

return <Tab key={index} className={styles.tab} theme={tabTheme} />

在表面上這使用它們抽象成獨立的庫react-css-themr一個裝飾，我建議給一個看太多，因爲它說明了如何將默認值更加深入，包括不同的合併，你重寫組成他們使用的策略

來源

2017-01-11 13:47:26 alechill

CSS模塊將不會讓你安全地覆蓋活躍的className（主要由設計）。真的，它應該通過API暴露，例如'activeClassName'。

如果不同意的維護者，或者你需要這個快，那麼你可以很容易地添加自己的積極的className，因爲你實現部件是管理指標狀態：

import {Tab, Tabs} from 'react-toolbox'; 
import styles from './MyTabs.css'; 


class MyTabs extends React.Component { 
    state = { 
    index: 1 
    }; 

    handleTabChange(index) { 
    this.setState({ index }); 
    } 

    render() { 
    const { index } = this.state; 
    return (
     <Tabs index={index} onChange={this.handleTabChange}> 
     <Tab label="Tab0" className={index === 0 ? styles.active : null}> 
      Tab 0 content 
     </Tab> 
     <Tab label="Tab1" clasName={index === 1 ? styles.active : null}> 
      Tab 1 content 
     </Tab> 
     </Tabs> 
    ); 
    } 
}

免責聲明：代碼是未經測試。

來源

2016-05-09 22:22:26 riscarrott

我也有類似的情況，我解決了它，像這樣：

import classNames from 'classnames'; 

... 

const activeClassName = {}; 
activeClassName[`${styles.active}`] = this.props.isActive; 
const elementClassNames = classNames(styles.element, activeClassName); 

return <div className={elementClassNames} />

我使用classnames包動態地添加基於關閉isActive道具的活動類。取而代之的isActive的道具，你可以提供任何布爾值。

這樣做的一個更簡潔的方式可能是：

const elementClassNames = classNames(styles.element, {[styles.active]: this.props.isActive});

來源

2016-05-20 14:56:27 Patrick

CSS模塊，反應和覆蓋CSS類

回答

相關問題