Two buttons are rendered in my button component. Depending on the label, the button receives the class addButton or clearButton.

Button Component:

import './Button.css'

interface ButtonProps {
    lable: string,
    disabled: boolean,
    onClick: MouseEventHandler<HTMLButtonElement>    
}

export const Button: FunctionComponent<ButtonProps> = ({ lable, disabled, onClick}): ReactElement => {
    
    
    let style: string = lable == 'ADD' ? 'addButton' : 'clearButton';
    console.log(lable);
    
    console.log(style);
    
    return(
        <div>
            <button className= {`button ${style}`} type='button' disabled= { disabled } onClick= { onClick }>
                {lable}
            </button>   
        </div>     
    );
}

In the stylesheet Button.css are the two classes addButton and clearButton. Strangely, only the style class that is in second place is loaded. In this situation, the addButton receives its colour and the clearButton remains colourless. If I place the style class of the clearButton in second place in the stylesheet, it receives its colour and the addButton remains colourless.

Button.css

.clearButton {
    background-color: #8c00ff;
}


.addButton {
    background-color: #7ce0ff;
   
}

If I outsource both style classes to separate stylesheets, it works but this is not an elegant solution.

I would also like to understand the problem

CodePudding user response：

I've execute your code, and it works, I think the problem is where you call the button you are not passing props to

CodePudding user response：

change import type of button style

import styles from './Button.css';

return(
        <div>
            <button className={`button ${label === 'ADD' ? styles.addButton : styles.clearButton}`}>
                {lable}
            </button>   
        </div>     
    );

and reolace background-color to background

.clearButton {
    background: #8c00ff;
}


.addButton {
    background: #7ce0ff;
   
}

you can test code in this codesandbox project