style attribute. The properties of these style objects are just like the CSS property, but they are camel case (
borderRadius) instead of kebab-case (
Here, we have a simple "hello world" component that sets up a class and has a render method that renders a prop. We validate the propType here, and then we export that component and use it inside of our main.js file. We import the example, and then we render that example. You can see over here we have "hello world" being rendered.
Let's add some styles to our component to make it render as an announcement on the web page. Going back to our example.js file, we could create some styles in an external style sheet and add a class name. Let's call it 'announcement'. This is a traditional way of adding styles to your HTML.
Instead of "border-radius" like this, we'll have "borderRadius" camel case. The values are in strings, so let's set the border radius to one rem. Then, let's have a border. Let's do one pixel, solid. That will be a nice orange color. Then, let's add some padding. We'll add 0.5 rem. Let's change the font family to be sans serif.
Here, I'll define "baseRadius", and we'll set it equal to that value that we had. Now, we can update our radius in one place, so we can change this to 0.5. We want it to be a smaller border radius. The component has been re-rendered with the new variable.
Let's also pull out our color into variable. We'll say "const primaryColor", and we'll set this equal to let's try a new blue color here. Now, we can change this to an ES6 template string, and we can render this value out. Instead of a hardcoded value, we can use our "primaryColor" variable that we set up. We can see that our variable has been applied.
To make sure that's working, let me bump up the pixel value on our border. We can see that it is still working. With React inline styles, we can also use ES6 modules. Let's take all of this code and let's place it in a new file. Going to go inside of our example component. Let's create a new file called "styles.js". We'll paste what we had before here.
Now, let's export the styles object that we created as the default export. Then, we'll save that and jump back over to our example.js file. We'll "import styles from 'styles';". Now, let's make sure this is still working. Let's jump back to our styles module. I'm going to add a background color that will be equal to our "primaryColor" variable. Let's also change the text color to be white.
Another thing that's really neat about React inline styles is that if we take a look at our elements in our developer tools, we can see that they do render as inline styles. This is cool because it means that all of your styles are self-contained within the component, and you don't have to deal with any cascading problems between other styles.
Everything is scoped to the component itself and self-contained, so your components become truly shareable.