在 React 中创建 JSX 后如何为其添加样式？

Question

Suppose I have a JSX element which is returned from some hidden source, lets assume for instance that the hidden source returns JSX like this:

getElement = () => {
  return (<h1>Some Test </h1>)
}

and I store that JSX in some variable, eg

this.h = this.getElement()

How can I change the style of h before finally rendering it to the DOM without adding external CSS?

Answer 1

Since you write from a hidden source I assume you can not change the element (black box)

What you can do is change the style props of h :

this.h = this.getElement()
this.h.props.style = { ...this.h.props.style, { backgroundColor: "#00ff00" } }

Here's an example, just using React Native, but same principle

---

How to figure it out:

Inspecting the output of getElement with console.log(getElement) would show you that <h1> is transpiled into React.createElement(...) and console.log(getElement()) would show you the returned object, where you can inspect props.style