How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this:

(unable to embed images at the moment, apologies)

This is the code snippet I'm working with:

<div>
  {/* Tabs */}
  <AppBar position="static" color="primary" style={{ position: 'fixed' }}>
    <Tabs
      fullWidth={true}
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="secondary"
    >
      <Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" />
      <Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" />
      <Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" />
    </Tabs>
  </AppBar>
</div>

I have tried various CSS properties suggested in similar queries but haven't found a solution yet. Appreciate any assistance provided. Thanks!

cssreactjsmaterial-uiappbarcenter-align

Answer №1

Consider incorporating the "centered" attribute into the Tabs components, like so:

    <div>
  {/* Tabs */}
  <AppBar position="static" color="primary" style={{ position: 'fixed' }}>
    <Tabs
      fullWidth={true}
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="secondary"
      centered
    >
      <Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" />
      <Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" />
      <Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" />
    </Tabs>
  </AppBar>
</div>

Answer №2

If you're having issues with the centered property not working, consider using the CSS API as an alternative solution (tested with Material-UI 3.7.0). This approach also provides more customization options:

import { Tabs, withStyles } from '@material-ui/core';

export const CenteredTabs = withStyles({
  flexContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
})(Tabs);

Answer №3

For those using the later MUI versions, this code snippet could potentially offer a solution:

<Tabs
     style={{ marginLeft: "auto" }}
>

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

What is the best way to save an object in a variable in MeteorJS/React for future retrieval?

This code snippet is located at the bottom of a component called 'Block'. export default theBlockContainer = createContainer(({ params }) => { return { voteStatus: Meteor.user()['listofvoted'], } }, Block); Although the ...

javascriptmeteorreactjs

Displaying an array of JSON objects in ReactJS by parsing them

Recently, I've encountered an odd issue with my React App. I am attempting to parse a JSON object that includes arrays of data. The structure of the data looks something like this: {"Place":"San Francisco","Country":"USA", "Author":{"Name":"xyz", "Ti ...

javascripthtmlreactjsfetchsetstate

Incorporate personalized elements into your @react-three/fiber environment

My dilemma lies in the fact that I am trying to incorporate my custom components into my scene. However, these custom components are defined in a separate file. When I attempt to define my custom component, I encounter an error message stating: Cannot find ...

reactjstypescriptthree.jsreact-three-fiberreact-three-drei

Avoid duplicate borders on columns that adjust their size based on the screen width

Picture yourself utilizing Bootstrap 4 and displaying various cells, each with unpredictable numbers. .cell { border: 1px solid black; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> < ...

csstwitter-bootstrapbootstrap-4border

What might be causing this error message to appear: "Invariant Violation: Unable to define both value and children"?

Why is this code showing an error (Invariant Violation: Cannot specify both value and children)? Every time I try to run this code, it displays the error Invariant Violation: Cannot specify both value and children. Can someone please help me figure out th ...

reactjsreact-nativeformikreact-native-elements

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

javascripthtmlcsstwitter-bootstrapz-index

Storing the app's shell for optimal performance in a React Progressive Web App using Server-Side rendering

Imagine you have a cutting-edge React-based mobile web application that utilizes server-side rendering to enhance speed and improve SEO. In this scenario, there is no static "index.html" file - instead, the index file is dynamically generated on the server ...

reactjsservice-workerprogressive-web-appsserver-side-renderingapp-shell

No recommended imports provided for React Testing Library within the VS Code environment

I am currently in the process of setting up a Next JS project with Typescript integration and utilizing React Testing Library. Unfortunately, I'm facing an issue with getting the recommended imports to work properly within my VS Code environment. To i ...

reactjstypescriptnext.jsreact-testing-library

Looking for a solution to update data in React components after a refresh using databinding and array push

I am dealing with a challenge The webpage is not reacting to the signal consistently. Signals are not coming in regularly. In my scenarios (Array data pushed after refresh) No event is triggered Since I cannot use setState function I believe calling ...

reactjs

Issue with React-select: custom Control prevents select components from rendering

Implementing react-select@next and referring to the guide here for custom Control components is not yielding the desired outcome. import TextField from "@material-ui/core/TextField"; import Select from "react-select"; const InputComponent = (props) => ...

javascriptreactjsmaterial-designmaterial-uireact-select

Creating a layout with Bootstrap 4 cards split into two rows

I need to change my layout from 3 columns to 2 columns. I know I can achieve this using CSS like the code snippet below, but I'm curious if there's a built-in Bootstrap method for this: .card-columns { -webkit-column-count: 2; -moz-column-co ...

csstwitter-bootstrapbootstrap-4

Deactivate the connection button for accessing the database

I'm currently developing a PHP script to establish a connection with a MySQL database. My goal is to deactivate a button and display a spinner image when I click on a submit button to initiate the database connection. Below is the code snippet I have ...

phpcssbootstrap-4

Tips for aligning Draggable components to a grid in Material UI

I am working on creating a draggable card that sits on top of a grid, and I want it to snap into place when moved to different sections of the grid. While I have managed to create the grid with columns and rows as well as a draggable element, I'm unsu ...

reactjsmaterial-ui

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

I am working on a file upload feature where each uploaded file should have a progress bar that updates as the file gets uploaded. I'm using a state to keep track of selected files and their respective progress: interface IFiles { file: File; c ...

javascriptreactjstypescriptnext.js

Choosing the middle child of an element without using the :nth pseudo-classes

As I gear up for a regional championship in web development for high school students, one of the preparation tasks involves solving challenges on the championship website. The HTML code provided is as follows: <h2>Task 6</h2> <article id=& ...

htmlcsscss-selectors

Alignment of images at the center within a container div while maintaining a height of 100%

Apologies if this question has already been addressed - I have tried numerous methods to center images horizontally without success. This particular image just does not want to align in the center! For reference, here is the JSFiddle link HTML: (Please n ...

htmlcssimage

Issue: Unable to locate 'path' in directory 'C:workdemo ode_modulesmime-types'

Encountering an error after updating from "react-scripts": "4.0.3" to "react-scripts": "5.0.1",. I need assistance with understanding why this error is occurring and how to resolve it... ERROR in ./node_modules/mime ...

javascriptreactjsnpm

Flutter or mobile development in general - Material 3 running smoothly on Emulator but facing issues on actual phone

As a newcomer to Flutter, I am currently working on my first projects. After updating both my Flutter version and my app, I discovered the new Material3 design language. I successfully enabled it in my theme settings, allowing me to see all the exciting ne ...

androidfluttermaterial-uimaterial-design

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

Issue at hand : My JavaScript is not functioning properly in my .php files CSS not applying while scrolling *CSS Files are named "var.css" #kepala { padding: 10px; top: 0px; left: 0px; right: 0px; position: fixed; background - c ...

javascriptphpjqueryhtmlcss

Make the div disappear upon clicking the back button in the browser

When a user selects a thumbnail, it triggers the opening of a div that expands to cover the entire screen. Simultaneously, both the title and URL of the document are modified. $('.view-overlay').show(); $('html,body').css("overflow","h ...

javascriptjqueryhtmlcss