javascript - 如何将我的深色模式功能集成到我的 NavBar 组件？

Question

所以我目前能够在明/暗模式之间切换我的应用程序，这非常好，我正在努力将我的功能转移到我的导航栏组件。我正在使用样式化组件来实现此效果，但目前只能在 NavBar 上方而不是在其内部渲染切换器文件，这使得 NavBar 被拉长。

到目前为止，我已经尝试通过 App.js 在我的导航组件之间渲染 Toggler 组件，但是当我运行我的应用程序时无法看到该组件。我也尝试将主题道具传递给我的导航栏组件也无济于事。希望在这里得到一些帮助！（导航栏称为TopBar）

globalStyles.js

import { createGlobalStyle} from "styled-components"
export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }
  `

主题.js

export const lightTheme = {
  body: '#FFF',
  text: '#363537',
  toggleBorder: '#FFF',
  background: '#363537',

}

export const darkTheme = {
  body: '#141414',
  text: '#FAFAFA',
  toggleBorder: '#6B8096',
  background: '#999',
  backgroundColor: '#363537'
}

切换器.js

import React from 'react'
import {
  func,
  string
} from 'prop-types';
import styled from "styled-components"
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
export const Button = styled.button `
  border: 2px solid ${({ theme }) => theme.toggleBorder};
  cursor: pointer;
  font-size:0.8rem;
  padding: 0.6rem;
  }
`;

const Toggle = ({
  theme,
  toggleTheme
}) => {
  return ( <
    div style = {
      {
        backgroundColor: 'black'
      }
    } >
    <
    AccountCircleIcon onClick = {
      toggleTheme
    } > Switch Theme < /AccountCircleIcon> <
    /div>


  );
};
Toggle.propTypes = {
  theme: string.isRequired,
  toggleTheme: func.isRequired,
}
export default Toggle;

使用DarkMode.js

import {
  useEffect,
  useState
} from 'react';
export const useDarkMode = () => {
  const [theme, setTheme] = useState('light');

  const setMode = mode => {
    window.localStorage.setItem('theme', mode)
    setTheme(mode)
  };

  const themeToggler = () => {
    theme === 'light' ? setMode('dark') : setMode('light')
  };

  useEffect(() => {
    const localTheme = window.localStorage.getItem('theme');
    localTheme && setTheme(localTheme)
  }, []);
  return [theme, themeToggler]
};

应用程序.js

import './App.css';
import Home from './components/home/home';
import Topbar from './components/topbar/topbar';
import Single from './components/single/single';
import Write from './components/write/write';
import Settings from './components/settings/settings';
import Login from './components/login/login';
import Register from './components/register/register';

import {ThemeProvider} from 'styled-components';
import  {useDarkMode} from "./components/useDarkMode"
import { GlobalStyles } from './components/globalStyles';
import { lightTheme, darkTheme } from './components/Theme';
import Toggle from './components/Toggler';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';

import { Context } from "./context/Context";
import React, { useContext, useState } from 'react';

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';


function App() {
  const [theme, themeToggler] = useDarkMode();

  const themeMode = theme === 'light' ? lightTheme : darkTheme;


  const { user } = useContext(Context);
  return (
    <ThemeProvider theme={themeMode}>
      <>
      <GlobalStyles/>
    <Router>
    <Toggle theme={theme} toggleTheme={themeToggler}></Toggle>
      <Topbar/>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/register">
          { user? <Home/> : <Register /> }
        </Route>
        <Route path="/login">
          { user ? <Home/> : <Login /> }
        </Route>
        <Route path="/write">
          { user ? <Write /> : <Login /> } 
        </Route>
        <Route path="/settings">
          { user ? <Settings /> : <Login /> }
        </Route>
        <Route path="/post/:postId">
          <Single />
        </Route>
      </Switch>
    </Router>
    </>
    </ThemeProvider>
  );
}

export default App;

TopBar.js

import useStyles from './styles';

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
import IconButton from '@material-ui/core/IconButton';
import Avatar from '@material-ui/core/Avatar';


import { Context } from "../../context/Context";
import React, { useContext } from 'react';

export default function Topbar() {


 
  const { user, dispatch } = useContext(Context);
  const classes = useStyles();

  const handleLogout = () => {
    dispatch({ type: "LOGOUT"})
  };
    
  return (
        <div className={classes.root}>
        <AppBar 
        color="transparent" 
        elevation={0} 
        position="static" 
        style={{ backgroundColor: 'orange', }}
        className={classes.appBar}
        >
          <Toolbar>
              
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <img src="/images/icon.png" alt="" className={classes.icon}/>
          </IconButton>
            <Typography variant="h6" className={classes.navTitle} style={{fontFamily: 'Garamond',fontSize:'36px',}}>
                <Link to ="/" className="link">Shards</Link>
            </Typography>
            <Button color="secondary" size="large" className={classes.links}>
            <Link to ="/write" className="link">Write</Link>
            </Button>
            <Button color="inherit" size="large" className={classes.links} style={{ color:'#ffffff', fontFamily: 'Lato'}}>Contact</Button>
            <Button color="inherit" size="large" className={classes.links} style={{ color:'#ffffff', fontFamily: 'Lato'}}>About</Button>
         
            {
                user ? (
                    <>
                    <Button color="inherit" onClick={handleLogout} size="large" className={classes.links} style={{ color:'#ffffff', fontFamily: 'Lato',}}>
                <Link to="/" className="link">Logout</Link>
                    </Button>
                    <Link to="/settings">
                    <IconButton edge="end" aria-label="account of current user" color="inherit">
                       <Avatar alt="" src={user.profilePic}></Avatar>
                    </IconButton>
                    </Link>
                  </>
                ) : (
                    <>
                  
                    <Button color="inherit" size="large" className={classes.links} style={{ color:'#ffffff', fontFamily: 'Lato',}}>
                    <Link to="/login" className="link">Login</Link>
                    </Button>
                    <Button color="inherit" size="large" className={classes.links} style={{ color:'#ffffff', fontFamily: 'Lato',}}>
                    <Link to="/register" className="link">Register</Link>
                    </Button>
              
                </>
                )
            }
       
          </Toolbar>
        </AppBar>
      </div>
    );
}

标签： javascriptreactjsdarkmode