Ways to Align an Item Horizontally within a Material-UI Typography Element

Struggling with centering the logo in an AppBar on extra small screens while using MUI V5 in a react project. The Typography component is nested inside a ToolBar within an AppBar that only displays on xs screens. Check out my code snippet below:

  <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar
        elevation={0}
        position="fixed"
        sx={{
          display: { xs: 'flex', sm: 'none' },
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
          bgcolor: 'gray',
        }}
      >
        <Toolbar >
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>

      
            <Typography
              variant="h5"
              noWrap
              component="a"
              href=""
              sx={{
                flexGrow: 1,
                bgcolor: 'red',
             
                display: { xs: 'flex', sm: 'none' },
   
                flexGrow: 1,
                fontFamily: 'monospace',
                fontWeight: 700,
                letterSpacing: '.3rem',
                color: 'inherit',
                textDecoration: 'none',
              }}
            >
              LOGO
            </Typography>
     
        </Toolbar>
      </AppBar>

Tried multiple solutions but can't seem to get it right. Any assistance would be greatly appreciated.

cssreactjsmaterial-ui

Answer №1

One effective method for handling spacing in Material-UI (MUI) is utilizing the Grid component. Here's an example of how your code could look:

return (
  <Box sx={{ display: "flex" }}>
    <CssBaseline />
    <AppBar
      elevation={0}
      position="fixed"
      sx={{
        display: { xs: "flex", sm: "none" },
        width: { sm: `calc(100% - ${drawerWidth}px)` },
        ml: { sm: `${drawerWidth}px` },
        bgcolor: "gray",
      }}
    >
      <Toolbar>
        <Grid
          container
          spacing={1}
          sx={{ alignItems: "center", justifyContent: "space-between" }}
        >
          <Grid item xs={4} sx={{ textAlign: "start" }}>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              // onClick={handleDrawerToggle}
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
          </Grid>
          <Grid item xs sx={{ textAlign: "center" }}>
            <Typography
              variant="h5"
              noWrap
              component="a"
              href=""
              sx={{
                bgcolor: "red",
                fontFamily: "monospace",
                fontWeight: 700,
                letterSpacing: ".3rem",
                color: "inherit",
                textDecoration: "none",
              }}
            >
              LOGO
            </Typography>
          </Grid>
          <Grid item xs={4}></Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  </Box>
);

Explore MUI Grid documentation

Answer №2

While I may not be the foremost authority on MUI, one suggestion is to start by specifying the flex direction. Following that, you can set either align items or justify content to center based on the chosen direction.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use React to increment a variable by a random value until it reaches a specific threshold

I am currently working on creating a simulated loading bar, similar to the one seen on YouTube videos. My goal is for it to last 1.5 seconds, which is the average time it takes for my page to load. However, I have encountered an issue with the following co ...

javascriptreactjs

The issue with property unicode malfunctioning in bootstrap was encountered

I have tried to find an answer for this question and looked into this source but unfortunately, when I copy the code into my project, it doesn't display Unicode characters. section { padding: 60px 0; } section .section-title { color: #0d2d3e ...

javascripthtmljquerycss

Javascript code experiences a shift in two different styles within a single conditional statement

I'm new to web design and I'm having trouble getting this code to work properly. Can anyone help me fix it so that both styles are applied correctly? // Access the sign_up modal window var modal = document.getElementById('id01'); // A ...

javascripthtmlcss

Combining numerous inputs into an array in a React component

As a beginner in coding, I am eager to learn React by building a project. Currently, I am facing a challenge and seeking guidance. https://i.sstatic.net/Ic2zC.png My goal is to store all these values in an array structured as follows: { option: { s ...

javascriptreactjsarraysobject

Exploring a utility function for saving object information in a dynamic state

Imagine my state was structured like this: state = { customer: { name: { elementType: "input", elementConfig: { type: "text", placeholder: "Your Name" }, value: "" }, street: { e ...

javascriptreactjsformsobject

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

phphtmlcsspdfmpdf

Achieve background color filling in ant-design charts based on y-axis value conditions

Currently, I am utilizing ant-design charts to visualize data retrieved from Django in React. My objective is to assign background colors based on the y-axis values. For example, I aim to have the background color range of 15-18 as red, 18-20 as yellow, an ...

reactjschartsant-design-pro

As the screen size decreases, stacked Font Awesome icons seem to vanish

Currently, I'm designing a form that requires the user to select a color scheme by clicking on circle font awesome icons. These icons are implemented using Bootstrap and when clicked, a stacked font-awesome icon appears. However, I've encountered ...

htmlcssvue.jsbootstrap-4font-awesome

Display resize grip when hovering

Is there a way to make elements resizable using resize: both, but only show the corner handle when hovering over the element? https://i.sstatic.net/cGIYf.png I am looking for a solution to display that specific handle only on hover. ...

javascripthtmlcssresize

Considering a transition from bootstrap to Material UI in React

I'm currently working on transitioning my react app from using bootstrap to Material-UI. However, I've encountered an issue when trying to change the modal - the form doesn't seem to be functioning properly. Since this is my first time using ...

reactjsmaterial-ui

Error encountered: Unable to grant permission when attempting to assign package.json scripts using sh -ac to target a particular .env file (react

Recently, I created a new React app using npx create-react-app and included several .env files (.env.staging, .env.development, .env.production). However, I prefer not to use dependencies like env-cmd and have been exploring using shell commands to target ...

reactjsnpmenvironment-variablesshpackage.json

Tips for adjusting border colors based on the current time

Trying to change the border color based on the opening hours. For example, green border from 10am to 9:29pm, yellow from 9:30pm to 9:44pm, and orange from 9:45pm until closing at 10pm. The issue is that the colors change at incorrect times beyond midnight. ...

javascripthtmlcss

What is the operational mechanism behind drag and drop page builders?

I am currently delving into my inaugural MERN project, where the functionality requires specific components (such as a checkbox to-do list, images, text, etc...) that empower users to construct various pages, larger multi-checkbox aggregation lists, and be ...

javascriptnode.jsreactjsmongodbexpress

"The Toggle Switch/checkbox on Proto.io is stuck and not toggling as

I'm currently struggling to make a toggle switch work on my webpage. Despite trying different approaches such as removing data or not applying it to the input element, the toggle still refuses to function properly. The data-field attribute is supposed ...

htmlcss

Learn how to remove the border and incorporate a background color into the outlined variant of MUI TextField

Looking to customize the outlined variant of a TextField in Material UI? Below, I aim to remove the border or change it to white color, and also give it a different background color. I've been using styled components in my app, and though I've tr ...

reactjsmaterial-uistyled-components

Ways to prevent the selection of images

Whenever I click on the ball, a click event is triggered. However, sometimes it doesn't work because I accidentally select the image and it interrupts the click event. I attempted to remove the selectable property using the following CSS properties, ...

jqueryhtmlcss

A guide on embedding an HTML link within a table cell using ReactJS with Material-Table

I am currently working with the material-table npm package in Reactjs. I am trying to display a link with a URL inside the table cells, however, it is being displayed as a string instead of an actual hyperlink. Does anyone have any suggestions on how to ...

node.jsreactjsmaterial-uimaterial-table

Social media platform-inspired grid layout for displaying photos in a stylish and orderly manner

Looking to create a photos grid layout similar to Facebook using angularjs and bootstrap. Came across the angular-masonry plugin which seems like it could work. Here are some sample layouts I'm aiming for: https://i.sstatic.net/6NdNW.png https://i.s ...

cssangularjsfacebooktwitter-bootstrapgrid

To avoid the sudden appearance of a div on the screen, React is programmed to wait for the

Struggling with preventing a flashing div in React where the error message renders first, followed by props, and finally the props render. The EventsView component includes the following code: view.js var view; if (_.size(this.props.events) !== 0) { vie ...

javascriptdictionaryreactjs

How can Redux help persist input value through re-rendering?

Handling Input Value Persistence in Redux despite Re-rendering? I am currently able to store and save input values, but only the data from one step ago. For example, when I click on the second input field, it displays the value from the first input fiel ...

javascriptreactjsreduxreact-reduxredux-form