- The application layout is only one part of the user interface equation. Another part is styling.
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<style>
.box {
border: 1px solid #333;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.box--large {
width: 270px;
height: 270px;
}
.box--medium {
width: 180px;
height: 180px;
}
.box--small {
width: 90px;
height: 90px;
}
</style>
<script type="text/babel">
function Box({ style, size, className = '', ...rest }) {
const sizeClassName = size ? `box--${size}` : '';
return (
<div
className={`box ${className} ${sizeClassName}`}
style={{ fontStyle: 'italic', ...style }}
{...rest}
/>
);
}
const element = (
<div>
<Box size="small" style={{ backgroundColor: 'lightblue' }}>
small lightblue box
</Box>
<Box size="medium" style={{ backgroundColor: 'pink' }}>
medium pink box
</Box>
<Box size="large" style={{ backgroundColor: 'orange' }}>
large orange box
</Box>
<Box>sizeless box</Box>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>- One of the most basic ways to style React components is with inline CSS. JSX elements can take a style attribute which takes in an object:
const element = (
<div>
<div
className="box box--small"
style={{ fontStyle: 'italic', backgroundColor: 'lightblue' }}
>
small lightblue box
</div>
</div>
);- The style property is wrapped in two sets of curly braces, one to interpolate JavaScript and the second to define the object.
function Box({ style, size, className = '', ...rest }) {
return (
<div
className={`box ${className}`}
style={{ fontStyle: 'italic', ...style }}
{...rest}
/>
);
}The next thing we'll do is make a reusable Box component. It would be better if the author could just define a size like small, medium or large. In this example we destructure size instead of className. That's why we could replace className with a size property that takes in a string:
function Box({ style, size, className = '', ...rest }) {
const sizeClassName = size ? `box--${size}` : '';
return (
<div
className={`box ${className} ${sizeClassName}`}
style={{ fontStyle: 'italic', ...style }}
{...rest}
/>
);
}
const element = (
<div>
<Box size="small" style={{ backgroundColor: 'lightblue' }}>
small lightblue box
</Box>
<Box size="medium" style={{ backgroundColor: 'pink' }}>
medium pink box
</Box>
<Box size="large" style={{ backgroundColor: 'orange' }}>
large orange box
</Box>
<Box>sizeless box</Box>
</div>
);