How can I remove a CSS class based on condition-CodePudding

Hi I am writing a react code for a button. Here is the code:

    <Button
    block={true}
    className={`sc-pc-action-button ${className}`.trim()}
    disabled={disabled}
    onClick={onClick}
  > Click me
      </Button>

There is a condition in which I dont need this sc-pc-action-button css.

Now this class sc-pc-action-button is hardcoded.

How can I write a CSS which tells me to ignore the contents of sc-pc-action-button and take fresh CSS I am giving.

I need a CSS solution to remove the properties. I don't need JS Solution

CodePudding user response：


<Button
  block={true}
  className={`${someCondition ? "sc-pc-action-button" : ""} ${className}`.trim()}
  disabled={disabled}
  onClick={onClick}
> Click me
</Button>

CodePudding user response：

   <Button
    block={true}
    className= {className ? className : "sc-pc-action-button" }
    disabled={disabled}
    onClick={onClick}
   > Click me
  </Button>