To GoodData homepage
Solved

applying boxShadow CSS style in GoodData.UI

  • 1 November 2021
  • 2 replies
  • 66 views
S
  • Shambo
  • Participating Frequently
  • 7 replies

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

Dan Homola
Rank

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!

K

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


Join us on
Welcome to the GoodData Community!Cookie settings