VS-code adding spaces between class name which contains hyphens

Question

My VSCode is configured with prettier and ESLint settings to make the development easy.

But I am not sure which rule is affecting my JSX class names. Ideally, the class name should be: test-wrapper

 <i className={style.test-wrapper} />

But its getting changed to below on save and causing lot of issues:

 <i className={style.test - wrapper} />

May i know which rule i should override or modify?

Answer 1

Using dot notation to access object property (style.test-wrapper) only works when the name of the property contains plain letters a-z, A-Z, digits 0-9 and special characters $ and _. Also, the name cannot start with a digit.

If you want to use character - in property name, you can use bracket notation:

<i className={style['test-wrapper']} />