Dla wszystkich zainteresowanych napotkałem ten sam problem podczas używania modułów css i reagowania modułów css .
Większość komponentów ma powiązany styl modułu css, aw tym przykładzie my Button ma własny plik css, podobnie jak komponent nadrzędny Promo . Ale chcę przekazać Button z Promo kilka dodatkowych stylów
Więc style
sprawny przycisk wygląda następująco:
Button.js
import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'
class Button extends Component {
render() {
let button = null,
className = ''
if(this.props.className !== undefined){
className = this.props.className
}
button = (
<button className={className} styleName='button'>
{this.props.children}
</button>
)
return (
button
);
}
};
export default CSSModules(Button, styles, {allowMultiple: true} )
W powyższym komponencie Button style Button.css obsługują typowe style przycisków. W tym przykładzie tylko plik.button
klasa
Następnie w moim komponencie, w którym chcę użyć przycisku , a także chcę zmodyfikować takie rzeczy, jak położenie przycisku, mogę ustawić dodatkowe style Promo.css
i przejść jako className
rekwizyt. W tym przykładzie ponownie nazwano .button
class. Mógłbym to nazwać cokolwiek nppromoButton
.
Oczywiście z modułami css ta klasa będzie, .Promo__button___2MVMD
natomiast przycisk pierwszy będzie czymś podobnym.Button__button___3972N
Promo.js
import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './Promo.css';
import Button from './Button/Button'
class Promo extends Component {
render() {
return (
<div styleName='promo' >
<h1>Testing the button</h1>
<Button className={styles.button} >
<span>Hello button</span>
</Button>
</div>
</Block>
);
}
};
export default CSSModules(Promo, styles, {allowMultiple: true} );