Is it appropriate to appy condition inside SX Props in Material Ui Component?

Question

My target is to change the UI of Nav Component based on history.location.pathName. So I have written a function named UI and this function call another function BoxPadding based on location. BoxPadding function receives a function and returns some Typography. In the Typography, I set the padding value using props. When blog component is displayed the padding will be 0 and when another component is displayed padding will be 10. Unfortunately, I am not getting my desired result. Is it appropriate to use props inside SX 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>
    </>
  )




}

score 0 · Answer 1 · answered Jan 14 '22 at 10:12

You could replace the useHistory by useLocation :

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

This way, you will know on which URL you are.

Then, replace the if-else :

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

Is it appropriate to appy condition inside SX Props in Material Ui Component?

1 Answers1