← 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[]

기본값: []

모든 유형의 style 속성 값을 허용할 컴포넌트 이름 목록입니다.

사용 방법

구성 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스