CODEWITHSUNDEEP
cssreactjsnext.jsjsx
Rabner Casandara
Rabner Casandara

Reputation: 151

Custom CSS Support for NextJS

I am trying to use my custom CSS library for my components in NextJS. In my components, I want to import my custom CSS file but it's not working.


import React from 'react'
import '../../style/custom.module.css'

function Footer() {
  return (
    <div className="a b">
      
    </div>
  )
}

export default Footer

My custom CSS file is inside the

style/custom.module.css

I have seen the nextJS documentation their they mentioned that in the NextJS version the custom CSS style is supported by default

Upvotes: 0

Views: 276

Answers (3)

sumaiya syed
sumaiya syed

Reputation: 1

Firstly, -import your css module to the main module.

  • and then pass it to the page that requires the css styling.

Upvotes: 0

Force Bolt
Force Bolt

Reputation: 1221

You can make a custom Styled component by importing a styled component from @emotion/styled and use this styled component to give styling by making custom components for a particular tag. You can do this in the same file also outside of your class or in another component also. To make in the same file, you can do so as:-

import styled from "@emotion/styled";

const CustomHeading=styled.h1`
color:yellow;
`

Use this Custom heading component in place of the h1 tag.

To define Custom component in the different file you will define with the same method, but you need to import that Custom component in the file in which you need to import it as:

import CustomHeading from "File path" After that, you can use this component in place of your h1 tag.

Upvotes: -1

Sayog
Sayog

Reputation: 770

You are using css module you have to import diffrently

import styles from '../../style/custom.module.css'


function Footer() {
  return (
    <div className={styles.yourcssclassname}>
      
    </div>
  )
}

export default Footer

Upvotes: 2

Related Questions