Menu
I'm using create-react-app v2.
I have a component with several classnames: "x15 x14 login-form__field". In the HTML they are the same order in both environments.
In the production build, '.x14' appears in a higher priority than 'login-form__field'. They are reversed (and correct) in development. Any ideas? I know webpack does some hoisting and post-processing, but not sure why this would affect it.
Cheers
-- Update --
I've just noticed that the custom class is being loaded in as an inline style, which is why it gets priority. I assume webpack is doing this. Is there anyway we can tell webpack/CRA to load styles as stylesheets - not inline. Otherwise it means the styles are not representative of production.
-- Second Update --
Create-react-app uses 'styleLoader' for inline-styles in dev for hot reloading and generates CSS for production only. This makes sense.
305
In class-based components, the className attribute is used to set or return the value of an element's class attribute. Using this property, the user can change the class of an element to the desired class.
We can add a multiple class names to the react element conditionally; by using template literals, ternary operator.
To pass class names as props to a React component: Pass a string containing the class names as a prop. Destructure the prop in the child component. Assign the class names to an element, e.g. <h2 className={className}>Content</h2> .
Create-react-app uses 'styleLoader' for inline-styles in dev for hot reloading and generates CSS for production only.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
