CSS Modules - exclude class from being transformed

问题

I'm using CSS modules and by far everything was working great.

We started to use external UI library along with our own one, so I'm writing components like this:

<div className={styles['my-component']}>
   <ExternalUIComponent />
</div>

Assuming that the ExternalUIComponent has its own class that in the final CSS file looks like this external-ui-component, how can I make adjust this component styling from my css file? The below example does not work:

.my-component {
   font-size: 1em;
}

.my-component .external-ui-component {
   padding: 16px;
   // Some other styling adjustments here
}

回答1:

Please do not use inline styles as someone else suggested. Stay away from inline styles as much as you can because they can cause unnecessary re-renders.

You should use global instead.

.my-component {
    :global {
        .external-ui-component {
           padding: 16px;
           // Some other styling adjustments here
        }
    }
}

https://github.com/css-modules/css-modules#usage-with-preprocessors

Also, I recommend using camel case style names which is the preferred way for css-modules. So your class name would be : .myComponent { ... }

And you can use it in your code as

<div className={ styles.myComponent } >

If you wanted to add more styles , you can use the array.join(' ') syntax.

<div className={ [ styles.myComponent, styles.anotherStyle ].join(' ') } >

This is cleaner!

回答2:

Did you try inline styles for that component ?

https://reactjs.org/docs/dom-elements.html#style

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

来源：https://stackoverflow.com/questions/52593591/css-modules-exclude-class-from-being-transformed

标签

css

reactjs

css-modules