React Transform adding support for 'className' and 'style' props on all components
npm install react-transform-styleclassName and style props, even if they don't explicity apply them to the outermost element in their render function.Without this, you'd need to make each React component explicity consume className and style and apply them to the outermost component. With this transform it is unnecessary (though this transform will play nicely with components that already do something like this).
##### __With__ react-transform-style
``js
import React, { Component } from 'react';
class HelloWorld extends Component {
render() {
return
js
`
generates the following
js
Hello World
`##### __Without__ react-transform-style
js
import React, { Component } from 'react';class HelloWorld extends Component {
render() {
return (
style={this.props.style}
>
Hello World
js
`
still generates the following (same as above)
js
Hello World
`$3
> .babelrc
js
{
"presets": [
"react"
],
"plugins": [
["react-transform", {
"transforms": [{
"transform": "react-transform-style"
}]
}]
]
}
`$3
- This will style the outermost element returned by your component's render function. Styling something deeper in the tree is not supported (and probably much harder) using this transform.
-
props are combined, with the passed in style` prop taking precendence. This makes it easier to override the default styling, but there's no way to guarentee your components style won't be overridden.