Solved

applying boxShadow CSS style in GoodData.UI

  • 1 November 2021
  • 2 replies
  • 43 views

i would like to apply box-shadow styling to an element in a GoodData.UI app, but cannot figure out the syntax for the properties.

some styling works, such as <b style={{marginLeft: 30, marginTop: 50, fontSize:40}}> but not sure how to enter the properties for boxShadow.

I’m looking to apply box-shadow: 20px 20px 20px 5px #0ff;

I notice the CSS style elements are different than html-based css. Example, I’m used to box-shadow and not boxShadow, and margin-left, and not marginLeft. It occurs to me that I may not be familiar with the CSS syntax standard used in GD.UI, perhaps you could direct me to online documentation for this standard.

Thanks

icon

Best answer by Dan Homola 2 November 2021, 12:24

View original

2 replies

Hello @Shambo,

the syntax of the CSS properties follows the React syntax (you can read more details about it in their documentation).

In short, it means that property names are camelCased and any non-numerical values are passed as strings. So for your box-shadow case, the proper syntax is

<b style={{ boxShadow: "20px 20px 20px 5px #0ff" }}>Some text</b>

Hope this helps!

Hello @Shambo,

the syntax of the CSS properties follows the React syntax (you can read more details about it in their documentation).

In short, it means that property names are camelCased and any non-numerical values are passed as strings. So for your box-shadow case, the proper syntax is

<b style={{ boxShadow: "20px 20px 20px 5px #0ff" }}>Some text</b>

Hope this helps!

 

Thanks for the link. It works for me. :thumbsup_tone5:

Reply