0

Hi I'm creating ReactJS component library for personal usage and trying to create a spinner for ex.

I would like to create dynamic css class (not style attribute of component like style={{}}) according to Spinner's size,transition (for speed) etc. When I create a style attribute it is displaying on console when view the Inspect in chrome. I would like to create dynamic css for different properties and apply to the component classList.

Spinner Sizes:

type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

For example in Chakra UI it is creating css class dynamically and append to the classList of component.

Chakra UI Spinner

<Spinner thickness='5px' size="lg" speed="3s"  />

Chakra UI Spinner Class => css-do6byp

class="chakra-spinner css-do6byp"

How can I do that for different props?

I could not found the solution. I would appreciate it if you cloud help me on this.

Thanks in advance.

Steven Ducker
  • 11
  • 1
  • For example, when you change **speed** prop, chakra ui is creating new css class and append to the classList of component.actually I don't want to use style attribute to hide the css properties from user. I would like to create css class and append to the classList. – Steven Ducker May 26 '23 at 18:06
  • Inline styles aren't hidden from the user. You might tag Chakra. – isherwood May 26 '23 at 18:12

0 Answers0