How to apply a CSS style dynamically using React JS?

Question

I would like to know how to apply CSS dynamically to all the elements in a page that belong to a CSS class in React JS? Currently I am using the following:

document.querySelectorAll('.my-paragraph-class').forEach(function (x: any) {
  x.style.fontSize = `${data.value}%`;
});

It works but I would like to know if there is a more efficient way instead of using document.querySelectorAll?

Also when the page loads new text, document.querySelectorAll has to be called again after the text loads, which is not ideal. I would like to know how to persist the modified CSS changes when new text is loaded dynamically?

Thank you in advance

Dharman · Accepted Answer · 2021-06-13 00:36:55Z

1

For applying a static font size to a class you shouldn’t have to use JavaScript at all.

In your css file just do:

.my-paragraph-class: {
 font-size: 10rem || whatever;
}

To dynamically add styling you could use a CSS in JS tool like styled components. For styled components you would import styled components and then write a code outside of your react function like this:

const StyledParagraph = styled.p`
 font-size: 10rem || ${props => props.fontSize}
`

In your JSX you would do something like:

 <StyledParagraph fontSize=“10rem”> Filler Text </StyledParagraph>

edited Jun 13, 2021 at 0:36

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Jun 13, 2021 at 0:31

Kyle

263 bronze badges

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

1 Comment

ipegasus Over a year ago

Thank you! @Kyle currently my component has a font size selector that increases or decreases the font size according to user selection. I will give it a try passing the font size as a parameter on the component that contains the paragraphs.

Collectives™ on Stack Overflow

How to apply a CSS style dynamically using React JS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related