React and external css

HTML-CSS
1

Can external CSS be manipulated using React?

2

It can be read and manipulated by JavaScript using the correct DOM API, so yes. Whether or not you use React isn’t really relevant.

What is it you are trying to do? Just wondering because manipulating external CSS is not exactly a common need

4

Take for an example, a button which is declared inside the render function of a component. On clicking that button, it should change the background of the body tag. How would you do that?

5

You don’t want or need to change external CSS, you have no reason to.

Just have a property on the state like bodyBackground and change that. Or like bodyBackgroundClass and change the class name.

Note you don’t use the body tag in React, so substitute whatever the outer wrapper of your app is called. Or if you do actually want to do that document.body.style.backgroundColor =

6

Thanks, dude. I would also like to ask if it is safer to use DOM manipulation functions inside react components?

7

Avoid if at all possible , doing so attempting to bypass how React works.

This is just an observation based on this question and the one in your other thread, but I suspect your making something simple into something that’s highly over-complex

8

yeah, I did use dom manipulation in one of my projects just to make things work out. So, it is better to use only react related things when making a react app like I can change inline styles of my outside wrapper to change its background rather than using document.body.style.backgroundColor= to change the background of my body tag.

9

As a rule, yes, but what exactly are you trying to do? As in what is the purpose?

10

I was making that random quote machine which required to change the background everytime a new quote appears on the screen.

11

Something like this is what I mean - unless the React component is just a tiny part of a webpage, the body should just be a necessary wrapper, you shouldn’t need to touch it ever

function randomColor() {
  const rand = Math.floor(Math.random() * (360));
  return `hsl(${rand}, 100%, 50%)`;
}

class myThing extends Component {
  constructor(props) {
    super(props)
    this.state = {
      backgroundColor: randomColor();
    }
  }

  changeBackgroundColor() {
    this.setState({ backgroundColor: randomColor() }) 
  }

  render() {
    return (
      <div className="wrapper" style={ `background-color: ${this.state.backgroundColor};`}>
        <button onClick={ this.changeBackgroundColor() } >Change color</button>
      </div>
    );
  }
}
12

okay, once I complete my project I will send you the link asking if I used the correct functions in my projects.