Second class of multiple classes can't override style - reactjs

Question

button.module.css
.general_button {
width: 100%;
}
button.js
import React from 'react';
import styles from './button.module.css';
const GeneralButton = ({ text, className}) => {
return (
<button className={`${styles.general_button} ${className}`}>
<p className={styles.text}>{text}</p>
</button>
);
};
export { GeneralButton };
app.module.css
.next_btn {
width: 35%;
}
app.js
import React from 'react';
import classes from './app.module.css';
import { GeneralButton } from './components/Buttons';
const App = () => {
return (
<div>
<GeneralButton className={classes.next_btn} text='next' />
</div>
)
}
export default App;
When I used button component from app, button component is working with 'width:100%'. I would like to be button component is with 'width: 35%'.
This is when I inspect browser.
This is when I inspect browser.

Answer 1

Since both classes are equally specific, your app chooses whichever comes later in the stylesheet. Unfortunately you have much control over this order since it is likely generated by webpack (or whatever bundler you happen to be using).
One of the main benefits of using modular css is to avoid having to fight specificity battles such as this, so I would suggest reworking the button component slightly - something like this might work:
const GeneralButton = ({ text, variant }) => {
let buttonClass = styles.general_button;
if (variant === "next") {
buttonClass = styles.next_button;
}
return (
<button className={buttonClass}>
<p className={styles.text}>{text}</p>
</button>
);
};
The advantage here is that the button lays out the options for how to present it and the parent component just selects the type it needs. This makes it safer to re-work the button component in the future since it encapsulates all of it's states.