Having dipped my toe into VueJS, I have fallen in love with their SFCs. Template, Script, Style now seems like such a sensible solution to all this talk of CSS-in-JS. Has there been any discussion for such a venture in React? I can imagine it wouldn't take much to make a webpack loader to translate an ComponentName.react file:
<script>
import React from 'react'
const ComponentName = () => {
return (
<div className="ComponentName"/>
)
}
export default ComponentName
</script>
<style scoped>
.ComponentName {
display: block;
}
</style>
There is JSS, also material-ui which is written in react uses this method and you only need one file per component
React components are already single file. Here's your example as a valid component:
import React from 'react' const styles = { container: { padding: 30, background: 'blue', }, } const ComponentName = () => ( <div style={styles.container} /> ) export default ComponentNameThis is without any libraries. If you're looking to use a scoped
<style>tag, then check out styled-jsx.Personally though, my favorite CSS-in-JS solution is styled-components. Instead of mapping the styles of an element with classes, you create actual styled components. Imagine just writing
<Button primary>instead of<button className="button button--primary">. The end result you can achieve with other solutions of course, but it's about the authoring of components that makes it appealing.