JSX Attributes

样式

编辑此页面

Solid 的 style 属性允许你提供 CSS 字符串或者一个对象，其中对象的键是 CSS 属性名：

// 字符串形式
<div style={`color: green; height: ${state.height}px`} />


// 对象形式
<div style={{
  color: "green",
  height: state.height + "px" }}
/>

与 React 的 style 属性不同，Solid 在底层使用 element.style.setProperty。这意味着你需要使用小写字母和破折号分隔的属性名，而不是 JavaScript 驼峰式的版本，比如使用 background-color 而不是 backgroundColor。这实际上可以带来更好的性能，并且与 SSR 输出保持一致。

// 字符串形式
<div style={`color: green; background-color: ${state.color}; height: ${state.height}px`} />


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

这也意味着你可以设置 CSS 变量！例如：

// 设置 css 变量
<div style={{ "--my-custom-color": state.themeColor }} />
报告此页面问题