react-css-modules


Add styleName property on React component when using react-css-modules


When using react-css-modules in a project, I found myself trying to do something that can be simplified to this:
import React from 'react'
import CSSModules from 'react-css-modules'
import ChildComponent from './ChildComponent.jsx'
import styles from './ParentComponent.css'
class ParentComponent extends React.Component {
render() {
return (
<div>
<p styleName='parentComponent'>This is rendered in ParentComponent</p>
<ChildComponent styleName='some-name' /> // this style is not applied
</div>
)
}
}
export default CSSModules(ParentComponent, styles)
The CSS class some-name is defined in ParentComponent.css and contains rules that will position ChildComponentwithin ParentComponent.
ChildComponent implementation looks like this:
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './ChildComponent.css'
class ChildComponent extends React.Component {
render() {
return (
<div> // expected to have this div decorated with 'some-name' class
<p styleName='childComponent'>This is rendered in ChildComponent</p>
<button styleName='childComponent'>This is rendered in ChildComponent</button>
</div>
)
}
}
export default CSSModules(ChildComponent, styles)
I was expecting to receive the CSS defined in the some-name class in the first element of what's rendered on ChildComponent (the wrapping ), but this is not happening and 'some-class' is just ignored.
I could workaround this issue by adding an extra wrapping and applying styles to it, but I would like to avoid this if possible:
// in ParentComponent do this instead
render() {
return (
<div>
<p styleName='parentComponent'>This is rendered in ParentComponent</p>
<div styleName='some-name'>
<ChildComponent />
</div>
</div>
)
}
Hopefully I have explained the use case and the issue well enough, so any recommendation on how to do this will be much appreciated.
I found out that it's possible to do this by setting the styles prop on the
import styles from './index.css'
class ParentComponent extends React.Component {
render() {
return (
<div>
<ChildComponent styles={styles}>The title</ChildComponent>
</div>
)
}
}
Note that the selector in the parent css file need to match the one in the child css file.
See a more detailed example here: https://github.com/gajus/react-css-modules/issues/220#issuecomment-286473757

Related Links

will react-css-module errorWhenNotFound to be false has side effects
Cannot use react-css-modules with Jest
Add styleName property on React component when using react-css-modules

Categories

HOME
arduino-uno
wso2
deezer
grep
infragistics
c#-2.0
umd
ebean
mouse
qore
elasticsearch-hadoop
gorm
spring-kafka
handsontable
quartz-scheduler
facebook-page
php-openssl
su
semantic-analysis
binary-data
phonegap
y86
normal-distribution
mixture-model
greenrobot-eventbus
broadcastreceiver
powershell-dsc
botbuilder
sas-jmp
galleria
chain-builder
apache-fop
pubmed
rails-routing
powercli
git-diff
darcs
jxcore
mako
hittest
crosswalk-runtime
gnome-shell-extensions
jquery-filter
setuptools
url-masking
mikroc
merge-conflict-resolution
bluemix-app-scan
dataview
phpcas
unity-networking
eclipse-clp
sframe
dereference
camanjs
tt-news
code-access-security
zend-route
eol
expected-exception
valuechangelistener
poller
pyhdf
cos
robotics-studio
specification-pattern
quickdialog
coderush
pysimplesoap
javaspaces
enter
xdomainrequest
netbeans-7.1
yui-datatable
xfbml
blitz++
gin
backcolor
boost-smart-ptr
sector
windows-live-messenger
misv

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App