Applying styles to DOM elements that aren't React components?

I like the idea that I should have

const styles = require('./someStyle.scss');

return (<Panel className={styles.aClass}>...);

but in practice this isn’t helpful when I want to apply styles to DOM elements that aren’t react components.

In my scenario I am using react-bootstrap and want to style the DOM tag <div class="body-panel">, but only have access to a <Panel> react component where the className only applies to the parent DOM element of the body-panel div.

When I try to do something like this:

.aClass {
  .panel-body {
    padding: 15px 0px 0px 0px;
  }
}

No style is applied. How can I make this work? Thanks

[gaving]

@Dattaya Thanks for this 👍

[Dattaya]

I haven’t encountered these problems, yet. There are few things I have in mind you could try. Firstly, I think webpack-isomorphic-tools doesn’t work that well with imports, so I always use require. Also, for some reason, even require doesn’t work for me when it’s outside of the render method of a component. Try to load your global styles inside of the render of Html helper component or App component like so:

  render() {
    require('medium-editor/dist/css/medium-editor.css');
    require('medium-editor/dist/css/themes/bootstrap.css');

This code is from my Editable component and I can see the styles are extracted properly in the prod mode. Also check you config files, this line https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/webpack-isomorphic-tools.js#L65 should be extensions: ['css', 'less', 'scss'], In dev.config you most likely have css loader already: { test: /\.css$/, loader: 'style!css?sourceMap'} and your prod.config seems to be correct.