React css formatting conditional on ant component

Question

I am trying to send in a style property to a component and not sure what the difference is..

Why does this statement work and applies the formatting

 <Toggle
className={styles.toggle_show}  // class name gets passed as Map_toggle_show__17ukO and applied 
/>

but this statement throws errors

 <Toggle
className={isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>

If I update the second statement to

 <Toggle
className={isShow ? "styles.toggle_show" : "styles.toggle_hide"}
/>

The classNames do get passed to the component but css dont get applied.

Also why is this message coming on the const declaration

import styles from "./Map.module.scss";

const [ToggleVisibilyClass, setToggleVisibilyClass] = React.useState(
    {styles.toggle_show}
  );

(property) styles: {
    readonly [key: string]: string;
}
Parsing error: ',' expected.eslint

Abdul · Accepted Answer · 2020-08-20 19:57:13Z

1

Try this:

className={isShow ? styles.toggle_show : styles.toggle_hide}

answered Aug 20, 2020 at 19:57

Abdul

1494 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chavdar Slavov · Accepted Answer · 2020-08-20 20:04:24Z

1

The correct way in your case will look like this:

<Toggle
  className={isShow ? styles.toggle_show : styles.toggle_hide}
/>

styles is actually an object with string properties, so {styles.toggle_show} is not valid syntax, that's why you are getting an error.

And this "styles.toggle_show" is working because it's a string, but it's not the correct string. Behind the scenes Webpack generates a different name for your classes, usually a unique one and you can access it with styles.toggle_show.

Also if you have some more complicated scenarios try using the classnames package it can make things easier and it have a lot of examples.

answered Aug 20, 2020 at 20:04

Chavdar Slavov

8758 silver badges22 bronze badges

3 Comments

Sarah Over a year ago

Thanks so much Chavdar, that helped a bunch. Is that why I am getting this error (property) styles: { readonly [key: string]: string; } Parsing error: ',' expected.eslint

Sarah Over a year ago

Actually {styles.toggle_show} was working and applying. too.

Chavdar Slavov Over a year ago

Sorry, that was unclear on my end, i was referring to the {styles.toggle_show} inside of {isShow ? {styles.toggle_show} : {styles.toggle_hide}}

Collectives™ on Stack Overflow

React css formatting conditional on ant component

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related