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';
class Component extends React.Component {
render() {
return (
<CSSX styles={ this.css() }>
<h1>Title styled with <i>CSSX</i></h1>
</CSSX>
);
}
css() {
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 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:
css() {
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.
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>
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:
class Component extends React.Component {
render() {
return (
<section>
<p>First paragraph</p>
<CSSX styles={ this.styleParagraph('#F00', 'second') }>
<p>Second paragraph</p>
</CSSX>
<CSSX styles={ this.styleParagraph('#00F', 'third') }>
<p>Third paragraph</p>
</CSSX>
</section>
);
}
styleParagraph(color, text) {
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.
If this sounds interesting to you follow the links below: