Jan 10, 2023 - 5 min to read
Jan 10, 2023 - Last updated
Applying inline styles to your react apps is one of the various ways of styling an application. Know when to use this approach and when it might not be advisable.
When building React applications, there may be a need to make it aesthetically pleasing and easy to use by beautifying the user interface or improving the user experience. This is known as styling React applications which can be an enjoyable part of building software. There are various ways to style React applications which includes;
This article explains how to apply Inline styles to React applications which will improve the overall user experience of your application so let’s get started.
To easily grab the concept of inline styling in react, let us take a look at what inline styling itself means. Inline styling is a way of adding CSS properties to HTML elements by specifying it in the opening tag of that element using the style attribute. With this understanding, we can easily relate inline styling in React to be a styling method where we add the CSS properties to the opening tag of JSX elements using the style attribute.
Inline styling in React elements involves using the style attribute on the opening tag of the element. This style attribute accepts a JavaScript object with properties that represent CSS properties as well as the corresponding acceptable values that the CSS properties allow.
Talk is cheap. Show me the code - Linus Tovald
const Button = () => {
return(
<button style={{backgroundColor: 'yellow'}}>Click me</button>
)
}Curly braces are used in JSX to enclose JavaScript expressions. In the snippet above, the object {backgroundColor: 'yellow'} is passed to the style attribute and since it’s a JavaScript expression, it is wrapped with {} which gives it the double curly braces ({{}}) look. More CSS properties can be added to the object and separated with a ,
CSS properties that are compound names (with two or more words) like background-color or animation-play-state are written in camel case convention as backgroundColor and animationPlayState respectively.
If you are wondering when to use inline styles in react well, wonder no more as this article takes you through scenarios where React inline styles are applied.
Inline styles have been proven as a useful way to react components while keeping all style information directly in the component rather than an external stylesheet.
const Button = () => {
const btnStyle = {
backgroundColor: 'yellow',
};
return <button style={btnStyle}>Click me</button>;
};This way, I have all my styles and JSX in one file so it is quite easier to focus on this file when making modifications to the component.
React applications can be viewed as a larger component made up of smaller components of which some are similar. This promotes the concept of reusable components or reusable styles from a style perspective. Take for instance two buttons with similar base styles and a slight variation.
const Buttons = () => {
const btnStyle = {
backgroundColor: 'yellow',
};
const newBtnStyle = {...btnStyle, border:'none'}
return (
<div>
<button style={btnStyle}>Click me</button>
<button style={newBtnStyle}>Click me</button>
</div>
);
};The buttons in the snippet above are based off of the same base style btnStyle. The second button reuses the btnStyle and builds on it to create a style variation where the button has no border.
Due to React being a popular library for making dynamic single page applications, we can leverage this dynamicity and apply it to our styles to produce reactive styles.
const SpecialButton = () => {
const [changeBg, setChangeBg] = React.useState(true)
const btnStyle = {
backgroundColor: changeBg ? '#7c3aed' : 'yellow',
color: changeBg ? '#ffffff' : 'black',
fontWeight: 700,
border: 'none',
padding: '.8rem 1.5rem',
borderRadius: '.5rem',
boxShadow: `${changeBg ? '4px 4px' : '2px 2px'} 0 #000`,
cursor: 'pointer'
};
return (
<div>
<button style={btnStyle} onMouseEnter={() => {setChangeBg(prevState => !prevState)}} onMouseLeave={() => {setChangeBg(prevState => !prevState)}}>Click me</button>
</div>
);
};The code uses the useState React hook to handle the dynamic changes of the button properties. Other properties of the button change based on the value of changeBg
When it comes to scalability, best practices should be considered as well as the use case in your application. For a use case where the react component or element to be styled needs heavy customization, then inline styling might not be the best approach as you might find yourself trying to individually manage a lot of moving parts which could make your component look bloated. However, if the component has minor customizations which will not hamper readability, then inline styles can be utilized.
:hover, :focus , :nth-of-type e.t.c.Decisions like this will be greatly influenced by the scope of the component you are trying to design. If it’s going to be a simple component, inline styling can be adopted for tht use case else If the component has high complexities then it’s best to go for other approaches other than the inline styling.
In this article, you have learnt how to use inline styling and also seen scenarios where inline styling can be utilized. We have also highlighted the pros and cons of using the inline style approach and thins to consider when making that decision.
Inline styling has its strengths and weaknesses just like every other programming design paradigms and the corresponding trade-offs they offer. Project planning and scoping of components can help you decide when to use it and when not to. Also remember that regardless of the approach you start with, you can always refactor when you realize a more suitable approach.
Thank you for reading
Feel free to leave suggestions or questions in the comment and kindly share the article if you gained something or feel it was helpful.
If you would like to connect with me, I'm available on;
brunoelo#8120