Styling the components
Styling is the very fundamental requirement of any website. Without styles, your website looks ugly. And React application is no exception.
In React, there are different ways we can apply styles to components.
In Next.js: _app.tsx
Next.js is the React Framework for the Web by Vercel.
The _app.tsx is the root component where we can import the styles and use the CSS classes through the application in different components. As you can see in the below code example, I’ve imported the bootstrap CSS in the _app.tsx component. This way we can apply the CSS globally.
import 'bootstrap/dist/css/bootstrap.min.css';
import type { AppProps } from 'next/app'
import DefaultLayout from "./layouts/DefaultLayout"
export default function App({ Component, pageProps }: AppProps) {
return <DefaultLayout>
<Component {...pageProps} />
</DefaultLayout>
}Load a CSS file in the HTML root document
If we are developing a pure React application, we have the index.html file available and we can load a CSS file in the <head> tag of that file.
If we are developing through Next.js, then we do not have index.html file. We can use the _document.tsx file to load a CSS file in the <head> tag as shown in the following example.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossOrigin="anonymous" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Apply a CSS file on the component level (CSS modules)
In React, we can also import a component-specific CSS file into that particular component. For example, I have a CSS file name component.module.css that I can include into a component named component.tsx as follows.
import style from './component.module.css';
const Component = () => {
return (
<>
<div className={style.header}>
This is sample header
</div>
</>
)
}
export default Component;As shown in the above example, we imported the CSS file and used a style keyword to represent it. Utilizing the style keyword, I can access the CSS classes defined in the CSS file and apply those CSS classes through expression, as shown in the above example.
The Style Attribute
Just as in-line styles in HTML, we can have in-line style attributes in React. Let’s see the example first.
const InlineStyleComponent = () => {
return (
<div>
<p style={{
borderLeft: '5px', borderColor: '#ff0000', padding: '10px 10px',
borderStyle: 'solid',
backgroundColor: 'gray',
color: 'white',
}}>This is style with inline style attributes</p>
</div>
)
}
export default InlineStyleComponent;As shown in the above example, we can apply an in-line style using the style attribute and setting the JavaScript expression. First, we need a style property style={} and then an object defining different style attributes.
A critical thing to note is that all the CSS attributes are camelCase and not similar to the traditional CSS attributes we write in the CSS file.
We can also define the style attributes as an object and assign it as a JavaScript expression, as shown in the below example.
const InlineStyleComponent = () => {
const style1 = {
borderLeft: '5px', borderColor: '#000000', padding: '10px 10px',
borderStyle: 'solid',
backgroundColor: 'gray',
color: 'white',
marginTop: '5px',
};
return (
<div>
<p style={style1}>This is style with inline style attributes</p>
</div>
)
}
export default InlineStyleComponent;