Using vanilla CSS in React application
Yet another way to apply CSS styles in JavaScript. It's not using an inline styling though. It's injecting a <style>
tag.
import React from 'react';import CSSX from 'react-cssx'; Component { return <CSSX => <h1>Title styled with <i>CSSX</i></h1> </CSSX> ; } { var color = '#BADA55'; return <style> h1 color: color ; h1 i text-decoration: underline; </style> ; }
To make the code above works you'll need:
- CSSX component (
npm install react-cssx
) - CSSX transpiler (It's available here. Get it as a webpack loader, Meteor package or gulp plugin.)
CSSX component
<CSSX>
component has only one required attribute - styles
. It should be an array in the following format:
'h1' 'font-size': '32px' 'h1 small' 'font-size': '24px' 'font-weight': 'bold'
Of course writing CSS that way is not really nice. So let's use CSSX and replace it with:
{ return <style> h1 font-size: 32px; h1 small font-size: 24px; font-weight: bold; </style> ;}
Notice that we should use a function that returns a <style>
tag. If we create the <style>
tag directly (in the render method for example) we'll get the CSS applied straight away to the whole page.
CSSX component's wrapper
The <CSSX>
component generates a <div>
by default. Use the data-element
attribute to specify the tag that you need:
<CSSX styles={ ... } data-element='h1'>
<p>Paragraph</p>
</CSSX>
Scoping
If you check some of the examples in a browser you'll see that the created styles are scoped to a specific element. For example:
Component { return <section> <p>First paragraph</p> <CSSX => <p>Second paragraph</p> </CSSX> <CSSX => <p>Third paragraph</p> </CSSX> </section> ; } { return <style> p color: color ; p::before content: text ; </style> ; }
There are three paragraphs rendered on the screen:
The first one does not have any local styles attached. However, the second and the third one are styled differently. They have their own dedicated CSS. CSSX library creates two <style>
tags in the <head>
of the document.
Misc
If this sounds interesting to you follow the links below: