In React, the `style` attribute assigns CSS declarations directly to one HTML element through a JavaScript object. For example, `<h1 style={{ color: 'hotpink' }}>Welcome!</h1>` sets that heading’s color. It is convenient for a tiny prototype, but it is a poor default for styling a full application. section 7.1.4
The trade-off becomes visible as an interface grows:
- Inline styles cannot express pseudoclasses, pseudoelements, at-rules, or nested rules. The inline button example consequently has no hover state or animation. section 7.1.4
- Declarations are repeated for each button instance, making the inline example’s files larger than those of the other implementations. section 7.1.4
- A value computed in JavaScript, such as a button width, is a practical reason to retain an inline declaration alongside CSS classes. section 7.3.5 section 7.3.3
Keep dynamic width separate from button rules
A button component can select its normal and outline styles with class names, let CSS handle its disabled state and hover animation, and set only its variable width inline: `const style = width ? { width: `${width}px` } : null;` followed by `<button style={style} ...>`. This avoids making the entire component depend on inline styling. section 7.3.3
Listing 7.3 src/Button.jsx with class names
import "./button.css"; #1
function Button({
children,
outline = false,
disabled = false,
className = "",
width = null,
}) {
const classNames = [ #2
"button", #3
outline ? "button--outline" : "", #4
className, #5
].filter(Boolean);
const style = width #6
? { width: `${width}px` } #6
: null;
return (
<button
className={classNames.join(" ")} #7
style={style} #7
disabled={disabled}
>
{children}
<svg
className="button__icon" #8
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 490 490"
>
<polygon
points="240.112,0 481.861,245.004 240.112,490
8.139,490 250.29,245.004 8.139,0"
fill="currentColor"
/>
</svg>
</button>
);
}
export default Button;
Inspect the button implementation to see the width-derived style object applied alongside class names. section 7.3.3
Choose a broader styling approach for components that need selectors and at-rules. CSS files and class names, CSS Modules, styled-components, and Tailwind CSS are alternatives with different trade-offs; no single approach fits every application or team. section 7.1.4 section 7.6
