CODEWITHSUNDEEP
reactjs
louis Schneider
louis Schneider

Reputation: 121

problem with passing style to style props

i have a component and i want to pass my custom style to it throughout style property
but i got syntax error for ( , ) between each piece the component

  <NeuButton
          width='60%'
          height='40px'
          style={{}}

and what i want to add to style is

"box-shadow": 0px 0px 0px #b6c0ca, 0px 0px 0px #ffffff, inset 5px 6px 4px #b6c0ca, inset 0px 0px 6px #ffffff,

it is for shadow of the component in each side

Upvotes: 0

Views: 95

Answers (2)

phoenixstudio
phoenixstudio

Reputation: 2638

Just wrap the value in quotes, and use boxShadow instead of "box-shadow" (using the javascript naming convention)

boxShadow: `0px 0px 0px #b6c0ca, 0px 0px 0px #ffffff, inset 5px 6px 4px #b6c0ca, inset 0px 0px 6px #ffffff`

Why you need to do that ? here an example

let height = 0;
//...
style={{width: 0, height}}

How to tell here if width: 0, 1 or width: 0 and height:0 ? you can't, and thats why the css property that has many attribute should be wrapped in quotes.

Upvotes: 1

Sergio Molina
Sergio Molina

Reputation: 36

you have to use the jss style

<NeuButton 
     style={{ boxShadow: " 0px 0px 0px #b6c0ca, 0px 0px 0px #ffffff, inset 5px 6px 4px #b6c0ca, inset 0px 0px 6px #ffffff" }}
>
  Content here

</NeuButton>

Upvotes: 1

Related Questions