在 Material Ui 组件中的 SX 道具中应用条件是否合适？答案

【问题标题】：Is it appropriate to appy condition inside SX Props in Material Ui Component?在 Material Ui 组件中的 SX 道具中应用条件是否合适？
【发布时间】：2022-01-14 09:31:51
【问题描述】：

我的目标是根据 history.location.pathName 改变 Nav Component 的 UI。所以我写了一个名为 UI 的函数，这个函数根据位置调用另一个函数 BoxPadding。 BoxPadding 函数接收一个函数并返回一些 Typography。在排版中，我使用道具设置填充值。当显示博客组件时，填充将为 0，当显示另一个组件时，填充将为 10。不幸的是，我没有得到我想要的结果。 SX props里面用props合适吗？

import * as React from 'react';
import NavBar from './../NavBar/NavBar';
import TopHeader from './../Header/TopHeader';
import { Typography } from '@mui/material';
import { createTheme } from '@mui/material';
import { Box } from '@mui/material';
import { styled } from '@mui/system';
import { useHistory } from 'react-router-dom';

import './Nav.css'
const theme = createTheme();

theme.typography.h3 = {
  fontSize: '1.5rem',
  '@media (min-width:600px)': {
    fontSize: '1.2rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2rem',
  },

};

export default function Nav({ img, text, textcolor }) {

  const history = useHistory();
  const pathName = history.location.pathname

  const MyComponent = styled('div')({
    backgroundImage: `url(${img})`,
    height: "100vh",
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    padding: '10px',
    margin: '0px',
  })


  const BoxPadding = (padding) => {
      return (
        <>
          <Typography theme={theme} sx={{ fontFamily: 'Poppins', textAlign: 'center', p: { lg: `${padding}`, xs: 1 }, height: "100%" }} component="div">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Typography>
          <Typography theme={theme} sx={{ fontFamily: 'Poppins', textAlign: 'center', color: 'orange', fontWeight: 'bold', marginTop: { lg: '10px', xs: '0px' }, }} variant="h5">
            Lets go..
          </Typography>
        </>
      )
    }
  

  const UI = () =>{
    if(pathName==='/Blog'){
      BoxPadding(0)
      console.log("10")
    }
    else{
      BoxPadding(10)
      console.log("10")
    }
  }
  return (
    <>
      <MyComponent height="">
        <TopHeader></TopHeader>
        <NavBar></NavBar>
        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', p: { lg: 4, xs: 0 }, width: { lg: "50%", xs: '100%' }, mx: 'auto', color: { xs: `${textcolor}` } }}>
          <Typography theme={theme} sx={{ fontFamily: 'Poppins' }} variant="h3" textAlign="Center">
            {text}
          </Typography>
          {UI()}
          


        </Box>
      </MyComponent>
    </>
  )




}

【问题讨论】：

标签： javascript css reactjs material-ui sx

【解决方案1】：

你可以用 useLocation 替换 useHistory ：

let location = useLocation();
const pathName = location.pathname
console.log(pathName) // /Blog/

这样，你就会知道你在哪个 URL 上。

然后，替换 if-else :

if(pathName==='/Blog/'){
      BoxPadding(0)
      console.log("0")
    }
    else{
      BoxPadding(10)
      console.log("10")
    }

【讨论】：