Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rule proposal: ensure style prop on DOM element tags is an object #715

Closed
lencioni opened this issue Jul 26, 2016 · 2 comments
Closed

Rule proposal: ensure style prop on DOM element tags is an object #715

lencioni opened this issue Jul 26, 2016 · 2 comments

Comments

@lencioni
Copy link
Collaborator

React will issue a warning in dev if you pass a non-object to the style prop on DOM element tags

https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L204-L207

This should be easy enough to enforce for most cases with a linter rule.

Bad:

<div style="foo" />
<div style={true} />
const styles = true;
<div style={styles} />

Good:

<div style={{ color: 'red' }} />
const styles = { color: 'red' };
<div style={styles} />

It would be even nicer if it validated that the values of the style object are all strings.

@lencioni
Copy link
Collaborator Author

Name: dom-elements-style-is-object?

@petersendidit
Copy link
Contributor

I can work on this

petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 8, 2016
petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 13, 2016
petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 13, 2016
petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 13, 2016
petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 21, 2016
petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 21, 2016
petersendidit added a commit to petersendidit/eslint-plugin-react that referenced this issue Aug 22, 2016
fson added a commit to fson/create-react-app that referenced this issue Sep 21, 2016
New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)
gaearon pushed a commit to facebook/create-react-app that referenced this issue Sep 22, 2016
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
feiqitian pushed a commit to feiqitian/create-react-app that referenced this issue Oct 25, 2016
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
rrdelaney pushed a commit to rrdelaney/reason-scripts that referenced this issue May 23, 2018
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
sven3270350 added a commit to sven3270350/react-typescript that referenced this issue Aug 11, 2022
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
OrdinalKing pushed a commit to OrdinalKing/create-react-app-ts-redux-saga-mui that referenced this issue Aug 26, 2022
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
SmartCodiDev added a commit to SmartCodiDev/redux-saga-mui that referenced this issue May 31, 2024
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
Kumljevx1 added a commit to Kumljevx1/create-react-app that referenced this issue Aug 26, 2024
* Update eslint-plugin-react and enable new rules

New rules:
* `react/no-danger-with-children` (jsx-eslint/eslint-plugin-react#710)
* `react/no-find-dom-node` (jsx-eslint/eslint-plugin-react#678)
* `react/style-prop-object` (jsx-eslint/eslint-plugin-react#715)

* Remove react/no-find-dom-node for now
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants