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.

Improve this question
2
  • 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. Commented May 26, 2023 at 18:06
  • Inline styles aren't hidden from the user. You might tag Chakra. Commented May 26, 2023 at 18:12
Related questions
4418
Change an HTML input's placeholder color with CSS
1361
CSS selector for first element with class
1364
Which characters are valid in CSS class names/selectors?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.