← Back to rules

react/style-prop-object 懸念

何を行うか

style プロップの値がオブジェクトまたはオブジェクトである変数であることを要求する。

なぜこれは問題なのか

JSX を使用する際、style プロップはスタイルプロパティから値へのマッピングとしてオブジェクトを期待している。

例

このルールに違反する 誤った コードの例：

<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 });

このルールに準拠する 正しい コードの例：

<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 プロップ値を許可するコンポーネント名のリスト。

使用方法

設定ファイルまたは CLI でこのルールを 有効化 するには、次のようにします：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/style-prop-object": "error"
  }
}

CLI

oxlint --deny react/style-prop-object --react-plugin

参照

• ルールのソース