How can I remove a CSS class based on condition

Question

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

Does this answer your question? [React Js conditionally applying class attributes](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes) — DBS, Sep 15 '22 at 12:19
Make a ternary inside like: {(condition ? 'sc-pc-action-button ' : "") + className } — Κωνσταντινος Χαφης, Sep 15 '22 at 12:24
adding to @ΚωνσταντινοςΧαφης if you don't have else statement then you can use `&&` — Vikas Singh, Sep 15 '22 at 12:25

score 0 · Answer 1 · answered Sep 15 '22 at 12:26

0


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

answered Sep 15 '22 at 12:26

Ahmet Ulutaş

187
7

How can I remove a CSS class based on condition

1 Answers1