0

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.

volna
  • 2,452
  • 4
  • 25
  • 61
  • 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 Mar 04 '17 at 03:06

1 Answers1

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

xxfast
  • 697
  • 5
  • 14