How do I Change a button's aspect ratio on click?

Joseph Mutua 0
Viewed 36

I am using MUI v5 AppBar to create a navigation bar with Tabs. When the Tabs are clicked, I want the background of the clicked Tab to blend with the background of the main page in the following manner:Desired Appearance

The problem is the Tabs are rendered as buttons, and will only appear centered in the appBar when clicked. I can adjust the styling when clicked to increase the height but that will increase the height of the whole button and even the bottom section doesn't blend in with the background as desired as shown here: Result

Is there a way to increase the proportions of the buttons unevenly on the top and bottom to achieve this and how will I get the background of the button to blend seamlessly with the rest of the page without the visible shadow. Here's a sample of my current code:

            <Box
              sx={{
                textTransform: "none",
                flexGrow: 1,
                display: { xs: "none", md: "flex" },
              }}
            >
              <Tabs
                value={selectedTab}
                onChange={handleChange}
                TabIndicatorProps={{hidden: true}}
                sx={{
                  "& button": { borderRadius: 1 },

                  "& button.Mui-selected": {
                    color: "black",
                    backgroundColor: "#e5e5e5",
                    height: 70,
                   
                  },
                }}
              >
                <Tab value="one" label="Invoice" />
                <Tab value="two" label="Students" />
                <Tab value="three" label="Reports" />
              </Tabs>
            </Box>

Any answer to either question is highly appreciated. Thank you.

material-ui reactjs css
1 Answers

Try this out:

<Box
      sx={{
        textTransform: "none",
        backgroundColor: "#295fab",
        flexGrow: 1,
        padding: "0px 5px",
        paddingTop: "16px",
        display: { xs: "none", md: "flex" }
      }}
    >
      <Tabs
        value={value}
        onChange={handleChange}
        TabIndicatorProps={{ hidden: true }}
        sx={{
          "& button": {
            borderTopLeftRadius: 6,
            borderTopRightRadius: 6,
            padding: "5px 25px",
            paddingTop: "16px"
          },

          "& button.Mui-selected": {
            color: "black",
            backgroundColor: "#e5e5e5"
          }
        }}
      >
        <Tab value="one" label="Invoices" />
        <Tab value="two" label="Students" />
        <Tab value="three" label="Reports" />
      </Tabs>
 </Box>
Omkar Pattanaik0
Related