How do I get my css component not be affected by global css?-CodePudding

I have a navbar component, as well as a Navbar.module.css file.

the navbar component file:

import styleNavbar from '../../../styles/Main/Navbar.module.css'

It's supposed to make the navigation bar look nice, but what's happening instead is that everything but the buttons gets styled. The buttons have changed back to the standard ones after I started using next-auth for social login.

the app file:

import React from 'react';
import { SessionProvider } from "next-auth/react"
import styles from '../styles/tstyles.css'

export default function App({Component,pageProps: { session, ...pageProps },}) {
  return (
    <SessionProvider className={styles} session={session}>
      <div className={styles} >
      <Component className={styles} {...pageProps} />
      </div>
    </SessionProvider>
    
  )
  };

The app file imports a tailwind css file that simply consists of the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

that's all the css i have in my app. i'm very unfamiliar with how this works - but the styles on the nav bar were definitely showing before.

the full navbar.js

import styleNavbar from "../../../styles/Main/Navbar.module.css";
import React, { useState, useEffect, useRef } from "react";
import { signOut } from "next-auth/react";

const NavButtonCreator = (props) => {
  const { mainprops, userprops, navbar, navprops, ...styleprops } = props;

  return (
    <button
      href="#"
      className={`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}
      {...props}
      onClick={() => {
        navbar.makeButtonClick(!navbar.buttonClick);
        navbar.setButtonChoice(navprops.navbutton);
      }}
    >
      {navprops.navbutton}
    </button>
  );
};

const NavButtonStyler = (props) => {
  const { mainprops, userprops, navbar, ...navprops } = props;

  return (
    <>
      {props.place == "left" && (
        <div className="">
          <NavButtonCreator
            mainprops={mainprops}
            userprops={userprops}
            navbar={navbar}
            navprops={navprops}
          />
        </div>
      )}

      {props.place == "center" && (
        <div className="absolute left-1/2 transform -translate-x-1/2 ">
          <NavButtonCreator
            mainprops={mainprops}
            userprops={userprops}
            navbar={navbar}
            navprops={navprops}
          />
        </div>
      )}

      {props.place == "right" && (
        <div className="absolute right-0">
          <NavButtonCreator
            mainprops={mainprops}
            userprops={userprops}
            navbar={navbar}
            navprops={navprops}
          />
        </div>
      )}
    </>
  );
};

const Navbar = (props) => {
  const { mainprops, ...userprops } = props;
  const [buttonClick, makeButtonClick] = useState(false);
  const [buttonChoice, setButtonChoice] = useState(userprops.pageId);

  const navbar = {
    buttonClick,
    makeButtonClick,
    setButtonChoice,
  };

  useEffect(() => {
    if (buttonChoice == "log out") {
      signOut();
    }
    userprops.makeRefresh(!userprops.refresh);
    userprops.setPageId(buttonChoice);
  }, [buttonClick]);

  if (userprops.visitorType == "viewer") {
    return (
      <div>
        <nav
          className={`${styleNavbar.page__menu} ${styleNavbar.page__custom_settings} ${styleNavbar.menu}`}
        >
          <ul className={`${styleNavbar.menu__list} ${styleNavbar.r_list}`}>
            <NavButtonStyler
              mainprops={mainprops}
              userprops={userprops}
              navbar={navbar}
              place="left"
              navbutton="uno"
            />
            <NavButtonStyler
              mainprops={mainprops}
              userprops={userprops}
              navbar={navbar}
              place="left"
              navbutton="dos"
            />
            <NavButtonStyler
              mainprops={mainprops}
              userprops={userprops}
              navbar={navbar}
              place="left"
              navbutton="tres"
            />
            <NavButtonStyler
              mainprops={mainprops}
              userprops={userprops}
              navbar={navbar}
              place="center"
              navbutton="four"
            />
            <NavButtonStyler
              mainprops={mainprops}
              userprops={userprops}
              navbar={navbar}
              place="right"
              navbutton="i dont speak spanish"
            />
          </ul>
        </nav>
      </div>
    );
  }
};

export default Navbar;

Navbar.module.css file:

/*
=====
DEPENDENCES
=====
*/

.r_link{
  display: var(--rLinkDisplay, inline-flex) !important;
}

.r_link[href]{
  color: var(--rLinkColor) !important;
  text-decoration: var(--rLinkTextDecoration, none) !important;
}

.r_list{
  padding-left: var(--rListPaddingLeft, 0) !important;
  margin-top: var(--rListMarginTop, 0) !important;
  margin-bottom: var(--rListMarginBottom, 0) !important;
  list-style: var(--rListListStyle, none) !important;
}


/*
=====
CORE STYLES
=====
*/

.menu{
  --rLinkColor: var(--menuLinkColor, currentColor);
}

.menu__link{
  display: var(--menuLinkDisplay, block);
}

/* 
focus state 
*/

.menu__link:focus{
  outline: var(--menuLinkOutlineWidth, 2px) solid var(--menuLinkOutlineColor, currentColor);
  outline-offset: var(--menuLinkOutlineOffset);
}

/* 
fading siblings
*/

.menu:hover .menu__link:not(:hover){
  --rLinkColor: var(--menuLinkColorUnactive, #2e354b);
}

/*
=====
PRESENTATION STYLES
=====
*/

.menu{
  background-color: var(--menuBackgroundColor, #2e354b);
  box-shadow: var(--menuBoxShadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
}

.menu__list{
  display: flex;  
}

.menu__link{
  padding: var(--menuLinkPadding, 1.5rem 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
}

/* 
=====
TEXT UNDERLINED
=====
*/

.text_underlined{
  position: relative;
  overflow: hidden;

  will-change: color;
  transition: color .25s ease-out;  
}

.text_underlined::before, 
.text_underlined::after{
  content: "";
  width: 0;
  height: 3px;
  background-color: var(--textUnderlinedLineColor, currentColor);

  will-change: width;
  transition: width .1s ease-out;

  position: absolute;
  bottom: 0;
}

.text_underlined::before{
  left: 50%;
  transform: translateX(-50%); 
}

.text_underlined::after{
  right: 50%;
  transform: translateX(50%); 
}

.text_underlined:hover::before, 
.text_underlined:hover::after{
  width: 100%;
  transition-duration: .2s;
}

/*
=====
SETTINGS
=====
*/

.page__custom_settings{
  --menuBackgroundColor: #2e354b;
  --menuLinkColor: #eed994;
  --menuLinkColorUnactive: #2e354b;
  --menuLinkOutlineOffset: -.5rem; 
}


/*
=====
DEMO
=====
*/

.body{
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;  
  flex-direction: column;
}

.page{
  box-sizing: border-box;
  max-width: 640px;
  padding-left: .75rem;
  padding-right: .75rem;
  margin: auto;
}

.page__menu:nth-child(n 2){
  margin-top: 3rem;
}


.substack{
  border:1px solid #EEE; 
  background-color: #fff;
  width: 100%;
  max-width: 480px;
  height: 280px;
  margin: 1rem auto;;
}

PS - i didnt write that css code

CodePudding user response：

i installed autoprefixer

// postcss.config.js
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

npm install autoprefixer

now the styles all look great....but the social auth doesn't work!!

TypeError: Cannot destructure property 'id' of 'undefined' as it is undefined.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

CodePudding user response：

It looks like your using NextJS, and If your using Tailwind why are you using CSS Modules?

npx create-next-app -e with-tailwindcss my-project will create a working NextJS TailwindCSS project for you.