Node + React - Hyphenated CSS Class Names

- isn't a valid identifier character, so your original code would be evaluated as:

s.header - inner

You haven't defined a variable called inner so you get a reference error.

However any character can be used to make up a key for an object, so you can use a string to access the property you want.

return (  <div className={s['header-inner']}> </div>);

css node.js reactjs sass babeljs

You can set css class by dot without using a string inside a bracket.

If you set webpack config's css-loader to

css-loader?camelCase

Now you can do something like this

<div className={s.headerInner}> </div>

css node.js reactjs sass babeljs

s['header-inner']

In Javascript, dot notation is a convenience, but it doesn't work for illegal variables. In that case, use the bracket notation.

Also, unrelated but you'll likely encounter this soon as well: CSS styles in javascript are turned camelCase. So, if you're setting a style:

<div style={{ backgroundColor: '#FFF', zIndex: 3 }} />

CodeHunter