Webpack & Css-loader. How to create dynamic className for React?

Question

The project has the following reference, which returns a string:

const left = slide.imageLeft; // introLeft

And further renders it inside React Component. But it returns as a string styles.imageLeft and since webpack doest convert it into corresponding bundled class like 914u923asdsajdlj1l23 the styles are not applied.

<div className={`styles.${left}`}>&nbsp;</div>

P.S I did try to eval, but it drops 2 errors.

There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.

And

ReferenceError: styles is not defined

Can you please suggest the possible ways to achieve dynamic class generation for css-loader.

Could you clarify what it is you wish to achieve and what the current problem is? Are you using the CSS modules option provided by css-loader? — fvgs
– fvgs, Commented Mar 4, 2017 at 3:06

xxfast · Accepted Answer · 2017-03-04 03:24:31Z

1

You have to define the style within the render(), or within the component definition, like this

render: function(){
  var myStyle = {
    // your style rules go here
  };
  return(
    <div style={myStyle}>
      {this.props.children}
    </div>
  )
}

in a way, this is already dynamic, because all you have to do is to change to style and it'll make sure that the component will re-render on update

answered Mar 4, 2017 at 3:24

xxfast

7375 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack & Css-loader. How to create dynamic className for React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related