Para qualquer pessoa interessada, encontrei o mesmo problema ao usar módulos css e módulos css react .
A maioria dos componentes tem um estilo de módulo css associado e, neste exemplo, meu botão tem seu próprio arquivo css, assim como o componente pai Promo . Mas eu quero passar alguns estilos adicionais para Button from Promo
Portanto, o style
botão capaz se parece com isto:
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} )
No componente Button acima, os estilos Button.css tratam dos estilos de botão comuns. Neste exemplo, apenas uma .button
classe
Então, no meu componente onde desejo usar o Botão e também quero modificar coisas como a posição do botão, posso definir estilos extras Promo.css
e passar como o className
suporte. Neste exemplo, novamente chamado de .button
classe. Eu poderia ter chamado de qualquer coisa, por exemplo promoButton
.
Claro que com os módulos css esta classe será, .Promo__button___2MVMD
enquanto o botão será algo como.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} );