简体   繁体   中英

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

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM