如何使我的css组件不受全局css的影响

Question

我有一个navbar组件，以及一个navbar.module.css文件。

导航栏组件文件：

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

它本应该让导航栏看起来很好看，但实际发生的是，除了按钮之外，其他所有东西都被设置了样式。在我开始使用nextauth进行社交登录后，这些按钮又变回了标准按钮。

应用程序文件：

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>

)
};

应用程序文件导入一个顺风css文件，该文件仅由以下内容组成：

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

这就是我应用程序中的所有css。我对它的工作原理很不熟悉，但导航栏上的样式肯定是以前的

完整的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文件：

/*
=====
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-我没有写那个css代码

Answer 1

i已安装autoprefixer

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

npm install autoprefixer

现在所有的款式看起来都很棒。。。。但是社交授权不起作用！！

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.

Answer 2

看起来你在使用NextJS，如果你在使用Tailwind，为什么要使用CSS模块？

npx create-next-app -e with-tailwindcss my-project将为您创建一个工作的NextJS+TailwindCSS项目。