Tips for adjusting the wrapper css rule of a Tabs component to left-align text in a vertical tab within Material-UI

Typically, when text is placed inside the wrapper, it is aligned in the center.

Is there a way to adjust the wrapper rule in

<span class="MuiTab-wrapper">Item One</span>

so that the tab text is aligned to the left (similar to what was done in the devtools by changing the flex-direction to "row")?

I attempted to use the technique of "Specific variation for a one-time situation" using $ruleName from the Material UI Customizing components documentation, as well as inline styling, but unfortunately had no success.

Here is the sandbox link.

(Please note: I have removed the $ruleName from useStyles and only kept the inline styling. You can experiment by commenting out and trying different options. However, none of them worked for me).

Answer №1

Here is a method to target the "wrapper" element inside each tab:

const useStyles = makeStyles((theme) => ({
  tabs: {
    "& .MuiTab-wrapper": {
      flexDirection: "row",
      justifyContent: "flex-start"
    }
  }
}));

This code snippet shows my modified version of your sandbox:

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired
};

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    "aria-controls": `vertical-tabpanel-${index}`
  };
}

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
    display: "flex",
    height: 224
  },
  tabs: {
    borderRight: `1px solid ${theme.palette.divider}`,
    "& .MuiTab-wrapper": {
      flexDirection: "row",
      justifyContent: "flex-start"
    }
  }
}));

export default function VerticalTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        className={classes.tabs}
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
        <Tab label="Item Four" {...a11yProps(3)} />
        <Tab label="Item Five" {...a11yProps(4)} />
        <Tab label="Item Six" {...a11yProps(5)} />
        <Tab label="Item Seven" {...a11yProps(6)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
      <TabPanel value={value} index={3}>
        Item Four
      </TabPanel>
      <TabPanel value={value} index={4}>
        Item Five
      </TabPanel>
      <TabPanel value={value} index={5}>
        Item Six
      </TabPanel>
       <TabPanel value={value} index={6}>
        Item Seven
      </TabPanel>
    </div>
  );
}
     

https://codesandbox.io/s/left-aligned-tabs-uirw8?fontsize=14&hidenavigation=1&theme=dark

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

The Makestyles hook in Material Ui appear to be malfunctioning

Hi there! I just started learning React and decided to give makeStyles a try. I followed the documentation on how to use it, but unfortunately, when I tried implementing it on my page, all I got was a blank white screen. import {makeStyles} from " ...

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

How can I achieve a transition effect from the bg-red-300 class to bg-transparent, or a different background class, over a 2-second duration? Do I need to use javascript for this effect? I would like an element to be highlighted and then return to its no ...

The Bootstrap glyphicon content breaks when using ASP.NET MVC minification

When working with asp.net, I noticed that minification tends to disrupt the display of bootstrap UTF symbols. For example, here is what it looks like in the original file: .glyphicon-edit:before { content: "\e065"; } And here is how it appears in ...

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

CSS - tackling the issue of menu items overlapping

My menu has two items, and when the user clicks on each item, a sub-menu is displayed. The issue is that both menus are displaying at the same spot - under the first item. I've tried tweaking it for a while but can't seem to fix the problem. Ad ...

Managing State in a React Drawer Interface

One day, I decided to create a page with a Sidebar on the left, an Appbar at the top, and a content area. Initially, everything functioned seamlessly as one enormous component. However, as we all know, React's charm lies in breaking down various eleme ...

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

Vuetify displaying incorrectly following deployment

After creating a spa with vue.js for the frontend, I utilized the vuetify library for various components and layout. While everything looked great locally, upon deploying to Azure, all vuetify styling seemed to disappear. My custom css was still applying ...

Having problems with Javascript and CSS not playing well together?

I have implemented a button from this source, but it does not appear correctly on my page. You can view the screenshot here. It seems like there is a conflict between the saved changes and the CSS. How can I resolve this issue? In addition, I am facing ...

Folded Corner Div using only CSS

I've been tirelessly experimenting with countless online methods, but I can't seem to make anything work. There's a div that needs to be flexible in width and height, positioned on a tile-able background image with a 1px border. The challe ...

Achieving a seamless process of sending two consecutive axios requests in React/Redux without clutter

I am in a situation where I need to send a post request using axios to update a list, followed by a get request to fetch the updated list. After implementing these operations with the code axios(postOptions) and then axios(getOptions), I found that some r ...

How to avoid displaying calculations within jsx when using React

Currently, I am in a map function where I am calculating the number of items for each category and then assigning this value to a property. The issue arises when this value is also displayed on the screen, which is something I want to avoid. ...

Maintaining Aspect Ratio and Adding Letterboxes with Next.js Image

In my Next.js app, there is a section dedicated to displaying selected photos from a gallery. It's crucial for this area to maintain a fixed size of 566px*425px as users navigate through images or when a photo is loading. While the layout is responsiv ...

Encountering issues with resolving 'devextreme/animation/frame' when integrating devextreme with a react application

I'm running into an issue while trying to implement the devextreme datagrid table in React. Upon importing it, I encounter the following error: ./node_modules/devextreme-react/core/templates-renderer.js Module not found: Can't resolve 'devex ...

Using an API to dynamically configure the columnVisibilityModel within the MUI DataGrid Pro

Upon review of the columnVisibilityModel in Mui, it appears to simply be a JSON object. When I make an API call that sets the JSON object, I encounter an error when passing it to the grid. For example: { id: false, name: true, middle: false } Sett ...

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

"Upon attempting to create a new React app with 'npx create-react-app myapp', an error was encountered stating that the directory 'AppDataRoaming pm-cache\_npx19748' does not

Operating System: Windows When trying to create a React app using npx, I entered the following command: npx create-react-app myapp An error appeared indicating: npm ERR! Could not install from "myusername\AppData\Roaming\npm-cache\_n ...

The interface 'IProduct' does not include several properties found in type 'IProduct[]', such as length, pop, push, concat, and many more

My goal is to transfer data between parent and child components using React and TypeScript. I have defined the following interfaces: export interface IProduct { id: string; name: string; price: string; image: string; ...

What could be causing the misalignment of the Datepicker calendar in Material UI?

I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...