I'm trying to add style to an element in my return of a react component, but I want to achieve this without adding a class. My text editor auto fills a style option, but I believe the syntax is wrong, since when trying to add a function on an onClick event, its a little different when its in the return of a react element. For example, instead of onClick=function() its onClick={() => {function()}} I'm hoping that instead of style={"background-color: green;"} its a different syntax to actually allow style changes once it hits the dom.

CodePudding user response：

In-line styles can be done, and here is a code example as you have not provided one.

for example, lets inline style an h1 tag

<h1 style={{background-color:'green', color:'white'}}>This is a tilte</h1>

more can be found here

additionally, I would not recommend inline styling as it's not industry-standard and can cause your code to become bloted.

CodePudding user response：

Style tags in react can indeed contain a references to functions.

I am not fully sure if you are working with React component classes or component functions, but your syntax can besides as follows. Create a variable called customStyle which will contain a function that returns your required style object:

customStyle = () => { return { color: 'red' } };

You can then reference customStyle inside markup as follows:

<div style={this.customStyle()}>My Element</div>