A.

eslint-plugin-reactのルールであるforbid-component-propsとforbid-dom-propsが利用できる。

Componentに対して禁止したければforbid-component-propsを、DOMに対して禁止したければforbid-dom-propsを利用すればいい。

今回は、style propを全面的に禁止にしたいという相談だったので次のようにすれば良い。

{
	rules: {
    "react/forbid-component-props": [
      "error",
      {
        forbid: [
	        {
					  "propName": "style",
					  "message": "Use css prop instead"
					}
	      ],
      },
    ],
    "react/forbid-dom-props": [
      "error",
      {
        forbid: [
	        {
					  "propName": "style",
					  "message": "Use css prop instead"
					}
	      ],
      },
    ],
	}
}

特定の要素に限定または除外したい

どちらのルールも同様の方法で制御することができる。

限定する場合はallowedForを利用する。

{
  forbid: [
    {
		  "propName": "style",
		  "allowedFor": ["SomeCompnent"],
		  "message": "Use css prop instead"
		}
  ],
},

特定の要素を除外する場合は、disallowdedForを利用する。

{
  forbid: [
    {
		  "propName": "style",
		  "disallowedFor": ["SomeCompnent"],
		  "message": "Use css prop instead"
		}
  ],
},