When it comes to writing CSS in a React app, there are numerous options to choose from. And many people coming to Ionic React for the first time often wonder what the best approach is. The React library itself doesn't have an opinion about how styles are used in a React app, so where does one turn?
By default, an Ionic React application uses plain old CSS files that are included in their corresponding components. This is a tried and true approach that has been around since the beginning of web development. However, this approach doesn't fit in well with the idea of writing encapsulated (yet extensible) components in React.
One of the major drawbacks to the plain old CSS approach is that there is no built-in mechanism to scope the CSS to your particular page or component. This could lead to unintended side effects where styles bleed out of their components and affect other elements.
Other areas of concern crop up around how to extend the style of a component, and how to apply themes to a component with only plain CSS.
Fortunately, there is a vibrant community in the React ecosystem that has solved a few of these issues. And since an Ionic React app is just a React app, we are free to utilize any of them in our apps!
In this post, I'll be going over one of my particular favorite libraries in the space, Styled Components, and show you how to get started using it to style your apps!
Meet Styled Components
Styled Components (SC for short from here on out) is a library that breaks down the barrier of tying styles to your React components. With SC, you don't need to declare particular CSS classes and hope they don't stomp on other classes in your project. Instead, you declare a component using the SC API, and then "attach" CSS to the component:
const MyButton = styled.button`
padding: 12px;
background-color: white;
color: blue;
`;
If you are using VS Code, make sure to download the vscode-styled-components extension, which will give you syntax highlighting and CSS code completion when working with styled-components.
Those funky back-ticks above are a new(ish) JavaScript feature called Tagged Template Literals. You've used and loved normal template literals (Hello ${name}!
) before. Tagged Template Literals are the same, but instead of doing the default string interpolation function when you use them on their own, you get to defined the function that gets ran on the string. Above, styled.button
is a function that will take in the text in the literal and manipulate it into a React component with a class attached to it with our CSS. In the end, the MyButton
component will emit HTML that will look similar to:
<button class="sc-bdnylx bIGghp">Click Me</button>
SC will worry about generating a unique class name on your behalf so your CSS is scoped to your component, and it won't affect other styles in your app.
Getting Started
Installing SC is a breeze. To get it into your Ionic React project run:
npm i styled-components @types/styled-components
This will install SC and it's typings so we can get great TypeScript autocompletion and type checking.
Next, import the styled object directly from styled-components
:
import styled from 'styled-components';
And then start creating styled-components using the styled
object. In the first example above, we created a button. However, the styled object has all the basic HTML primitive tags on it, like div
, a
, header
, you name it. You can also extend other React components, as long as the component takes in className
as a prop, and that className gets applied to the underlying HTML element the component renders.
Scoping CSS to an IonPage
One of the big benefits you get when using Ionic Angular is that the styles you define using the :host
pseudo-selector in a component's CSS file are scoped only to that component. You can achieve the same thing in Ionic React using SC. Below, we will create a "styled" IonPage
by passing in IonPage
into the styled object:
const MyPage = styled(IonPage)`
`;
And replacing IonPage
with MyPage
in the JSX:
<MyPage>
<IonHeader>...</IonHeader>
<IonContent fullscreen>...</IonContent>
</MyPage>
Adding styles directly to IonPage
isn't terribly useful, though. What it does buy us, however, is we can now target other classes in our page without fear that they will affect another page. Styled Components supports nesting CSS classes, a feature that I loved in SASS and find it hard to live without in plain CSS (though we might someday get native nesting support in CSS). So, we can start to define new elements with classes and target them in our MyPage
component:
const MyPage = styled(IonPage)`
.box {
border: 1px solid white;
margin: 10px;
height: 200px;
width: 200px;
}
`;
<MyPage>
<IonHeader>...</IonHeader>
<IonContent fullscreen>
<div className="box"></div>
</IonContent>
</MyPage>
Please forgive my lack of design powers, I rolled a 2 on Aesthetics when born.
Styling an Ionic Component
Styling one of the built-in Ionic components couldn't be easier. In fact, you already saw how to do so in the above example. Let's look at a component that offers some more options though, like IonButton
:
const MyButton = styled(IonButton)`
--background: green;
`;
...
// And to use it:
<MyButton>Hello!</MyButton>
Ionic components are web components that use Shadow DOM, therefore, styles defined outside of the web component don't affect the inner parts of the web component. To get around this, Ionic uses CSS Variables that allow developers to set styles that the web component can use.
In the above example, we set the background
and border-color
CSS variables, and these changes will only apply to our MyButton
component.
Recently, Ionic also released support for Shadow Parts, which allows web component developers to expose certain parts of the web component and have those parts be targeted via CSS. Below, we accomplish the same thing as the example above but we target the native HTML button via the native
shadow part:
const MyButton = styled(IonButton)`
&::part(native) {
background-color: green;
}
`;
The &
refers to the parent component itself, then we use the part
pseudo-selector and target the native
shadow part that the IonButton
exposes.
Learn more about CSS Variables and Shadow Parts from our docs, and check out this post about Shadow Parts on the Ionic blog.
Wrapping up
CSS in React, (and Ionic React!), is a tricky subject, but fortunately, there are many ways you can go about it.
Hopefully, I gave you a taste of what you can do by using styled-components in an Ionic React app and opened your eyes to some of the possibilities.
I just covered the bare minimum of what you can do with styled-components, there's much more to it, and once you get the grasp of the library, you can create some pretty powerful components. I encourage you to visit the Styled Component docs to learn more and give it a try.
How are you going about styling your Ionic React apps? Is there something more you want to see? Hit me up in the comments below for reach out to me @elylucas and I just might write about it.
Happy Coding!
Top comments (7)
That is really nice to hear. thank you for the update and good luck. This is the best Website I have ever gone through and find amazing very interesting information. Very detailed and unique. Highly appreciated Online Shopping in Karachi
We're an initial chauffeur support based in Dubai catering to the wants of people who demand a Driver to operate a vehicle their very own car. We do it Secure & Comfortably. safe driver dubai
hello @elylucas thank you very much for this post i'm new to ionic and i want to override some styling for ionic components, i used tailwind but I doesn't work with these built-in components so i will try styled components and i think it will work properly, just i have a question: how can i get the default styles to override with styled component you used --background how do i know the class to target in the built-in component ????
Your point is genuine but I need to get some more details about this to provide it to my essay writer help Australia for better performance in the next assignment. Thank you so much.
Vert useful article. I Will adopt it may be. Recently i think Material UI approch to define directly css properties in component js file is good and i like it.
Styling an Ionic Component ... Ionic components are web components that use Shadow DOM, therefore, styles defined outside of the web component
WeSell
Some comments may only be visible to logged-in visitors. Sign in to view all comments.