className
attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
JSX elements use the style
attribute, but because of the way JSX is transpiled, you can't set the value to a string
. Instead, you set it equal to a JavaScript object
. Here's an example:
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
Notice how we camelCase the "fontSize" property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.
style
attribute to the div
in the code editor to give the text a color of red and font size of 72px.
Note that you can optionally set the font size to be a number, omitting the units "px", or write it as "72px".
div
element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })());
- text: The div
element should have a color of red
.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })());
- text: The div
element should have a font size of 72px
.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })());
```