Блог

У меня есть компонент navbar, а также файл Navbar.module.css.

файл компонента navbar:

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

Предполагается, что панель навигации должна выглядеть красиво, но вместо этого происходит то, что все, кроме кнопок, стилизуется. Кнопки вернулись к стандартным после того, как я начал использовать next-auth для входа в социальную сеть.

файл приложения:

 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, который просто состоит из следующего:

 @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" amp;amp; (
        <div className="">
          <NavButtonCreator
            mainprops={mainprops}
            userprops={userprops}
            navbar={navbar}
            navprops={navprops}
          />
        </div>
      )}

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

      {props.place == "right" amp;amp; (
        <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-код

я установил 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.
 

Похоже, вы используете NextJS, и если вы используете Tailwind, то почему вы используете CSS-модули?

npx create-next-app -e with-tailwindcss my-project создам для вас рабочий проект NextJS TailwindCSS.