CODEWITHSUNDEEP
cssreactjs
SImon Haddad
SImon Haddad

Reputation: 842

Issue with giving margin to a jsx element inline

I have a jsx element and I am trying to give it a margin style inline. I am having issues with the right syntax to use. i will paste it below

<Nunito20 style={{color: frenchGray, margin: 20 0 3 0;}}>Full Name</Nunito20>

This gives an error, i also tried with commas and the same issue pls help

Upvotes: 2

Views: 292

Answers (3)

iamsourabhh
iamsourabhh

Reputation: 83

In JSX, we assign a object for a style. The syntax followed is an invalid javascript object and hence won't work. You must always assign style prop with a valid javascript object.

<Nunito20 style={{color: 'frenchGray', margin: "20 0 3 0"}}>Full Name</Nunito20>

If the value of a given key in the object, will result in an invalid object, its better to wrap it into quotes.

Upvotes: -1

Sunil Chaudhary
Sunil Chaudhary

Reputation: 4743

There are 2 issues in the code. The style tag in jsx should be a valid javascript object

So, your code will be converted to: 

<Nunito20 style={{color: frenchGray, margin: "20px 0 3px 0"}}>Full Name</Nunito20>
  • the margin value will be one single string
  • you need to give px to the margin values in this case "20px 0 3px 0". px can be left out if there is only one numeric value such as margin: 20

Upvotes: 1

kind user
kind user

Reputation: 41893

It's a wrong syntax, JS won't understand it.

Use a string instead:

<Nunito20 style={{ color: frenchGray, margin: '20px 0 3px 0' }}>Full Name</Nunito20>

Upvotes: 3

Related Questions