Style

Solid's style attribute lets you provide either a CSS string or an object where keys are CSS property names:

1
2
3
4
5
6
7
8

// string
<div style={`color: green; height: ${state.height}px`} />

// object
<div style={{
  color: "green",
  height: state.height + "px" }}
/>

Unlike React's style attribute, Solid uses element.style.setProperty under the hood. This means you need to use the lower-case, dash-separated version of property names instead of the JavaScript camel-cased version, such as background-color rather than backgroundColor. This actually leads to better performance and consistency with SSR output.

1
2
3
4
5
6
7
8
9

// string
<div style={`color: green; background-color: ${state.color}; height: ${state.height}px`} />

// object
<div style={{
  color: "green",
  "background-color": state.color,
  height: state.height + "px" }}
/>

This also means you can set CSS variables! For example:

1
2

// set css variable
<div style={{ "--my-custom-color": state.themeColor }} />

Комментарии