Skip to content
← Back to rules

react/style-prop-object Suspicious

它的作用

要求 style 属性的值必须是一个对象,或者是一个指向对象的变量。

为什么这不好?

在使用 JSX 时,style 属性期望的是一个从样式属性到值的对象映射。

示例

此规则的错误代码示例:

jsx
<div style="color: 'red'" />
<div style={true} />
<Hello style={true} />
const styles = true;
<div style={styles} />

React.createElement("div", { style: "color: 'red'" });
React.createElement("div", { style: true });
React.createElement("Hello", { style: true });
const styles = true;
React.createElement("div", { style: styles });

此规则的正确代码示例:

jsx
<div style={{ color: "red" }} />
<Hello style={{ color: "red" }} />
const styles = { color: "red" };
<div style={styles} />

React.createElement("div", { style: { color: 'red' }});
React.createElement("Hello", { style: { color: 'red' }});
const styles = { height: '100px' };
React.createElement("div", { style: styles });

配置

此规则接受一个包含以下属性的配置对象:

allow

type: string[]

default: []

允许 style 属性使用任意类型值的组件名称列表。

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/style-prop-object": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/style-prop-object": "error",
  },
});
bash
oxlint --deny react/style-prop-object --react-plugin

版本

此规则是在 v0.11.0 中添加的。

参考资料