``Stylishly Designed CSS Tabs inspired by Google Chrome's Modern

Question

``Stylishly Designed CSS Tabs inspired by Google Chrome's Modern

Utilizing Material UI Tabs in React to create curved tabs resembling those seen in Google Chrome. The design requires the parent element to have a bottom border that extends across the entire row, appearing on both the tabs and other content on the right. However, the selected tab should not display this bottom border from its parent.

Expected Outcome:

Current Outcome:

The parent's border is mistakenly applied to the selected tab, contrary to what I intended. Take a look at my code on CodeSandbox link.

Approach Attempted:
I experimented with an ::after pseudo-element positioned absolutely for the selected tab, giving it a higher z-index. This pseudo-element was meant to cover the parent's bottom border with a white-colored horizontal line. However, my attempts were unsuccessful. Despite trying various CSS modifications, the parent's border would not budge. Any suggestions to refine my current approach or offer a new solution are welcome.

(Please keep in mind that I want to continue using Material UI Tabs as the foundation.)

Additionally, can anyone explain why there is a delay when selecting a tab?

css material-ui tabs

Answer 1

Answer №1

If you're looking to achieve a specific effect, here's a solution: Remove the bottom border of the parent element, create a new CSS selector for giving tabs that are not .MuiSelected a bottom border, and add a bottom border to the someother content div so that the grey line extends across the entire page. You can adjust the shade of grey to match your color scheme:

Link to CodeSandbox

Subtabs

import styled from "@emotion/styled";
import MuiTabs from "@material-ui/core/Tabs";

export const StyledSubTabs = styled(MuiTabs)`
  .MuiButtonBase-root.MuiTab-root {
    background: white;
    border-radius: 8px 8px 0 0;

    :hover {
      background: pink;
    }
  }

  .MuiButtonBase-root.MuiTab-root.Mui-selected {
    border-top: 3px solid gray;
    border-left: 3px solid gray;
    border-right: 3px solid gray;
    border-bottom: none; /* not working */
    z-index: 10;

    :hover {
      background-color: pink;
    }
  }
//
//added this
//
  .MuiButtonBase-root.MuiTab-root {
    border-bottom: 3px solid gray;
    z-index: 10;

    :hover {
      background-color: pink;
    }
  }

  .MuiTabs-indicator {
    display: none;
  }
`;

App.js

import React, { useState } from "react";
import Tab from "@material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";

const App = () => {
  const [index, setIndex] = useState(0);
  const handleChange = (event, newIndex) => {
    console.log("SubTab - index", newIndex, event);
    setIndex(newIndex);
  };

  const parentStyles = {
    // remove this ---->  borderBottom: "3px solid gray",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  };

  return (
    <div style={parentStyles}>
      <StyledSubTabs value={index} onChange={handleChange}>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
      </StyledSubTabs>
      <div
//added this
        style={{
          borderBottom: "3px solid gray",
          height: 45,
          flexGrow: 1
        }}
      >
        Some Other Content
      </div>
    </div>
  );
};

export default App;

Answer 2

If you're looking to achieve a specific effect, here's a solution: Remove the bottom border of the parent element, create a new CSS selector for giving tabs that are not .MuiSelected a bottom border, and add a bottom border to the someother content div so that the grey line extends across the entire page. You can adjust the shade of grey to match your color scheme:

Link to CodeSandbox

Subtabs

import styled from "@emotion/styled";
import MuiTabs from "@material-ui/core/Tabs";

export const StyledSubTabs = styled(MuiTabs)`
  .MuiButtonBase-root.MuiTab-root {
    background: white;
    border-radius: 8px 8px 0 0;

    :hover {
      background: pink;
    }
  }

  .MuiButtonBase-root.MuiTab-root.Mui-selected {
    border-top: 3px solid gray;
    border-left: 3px solid gray;
    border-right: 3px solid gray;
    border-bottom: none; /* not working */
    z-index: 10;

    :hover {
      background-color: pink;
    }
  }
//
//added this
//
  .MuiButtonBase-root.MuiTab-root {
    border-bottom: 3px solid gray;
    z-index: 10;

    :hover {
      background-color: pink;
    }
  }

  .MuiTabs-indicator {
    display: none;
  }
`;

App.js

import React, { useState } from "react";
import Tab from "@material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";

const App = () => {
  const [index, setIndex] = useState(0);
  const handleChange = (event, newIndex) => {
    console.log("SubTab - index", newIndex, event);
    setIndex(newIndex);
  };

  const parentStyles = {
    // remove this ---->  borderBottom: "3px solid gray",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  };

  return (
    <div style={parentStyles}>
      <StyledSubTabs value={index} onChange={handleChange}>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
      </StyledSubTabs>
      <div
//added this
        style={{
          borderBottom: "3px solid gray",
          height: 45,
          flexGrow: 1
        }}
      >
        Some Other Content
      </div>
    </div>
  );
};

export default App;

``Stylishly Designed CSS Tabs inspired by Google Chrome's Modern

Answer №1

Similar questions

Tips for confirming date is earlier than current date in Reactjs?

The Video Element Is Not Expanding to Fill the Entire Parent Div

Switching Text in ReactJS from V to X: A Tutorial

Techniques for animating background image using jQuery

Is there a solution available for tidying and organizing a CSS stylesheet efficiently?

Autocomplete feature is not functioning properly when trying to use JSON input

Tips for decreasing the height and dimensions of a Material-UI<Select> input field within a Material UI and formik interface

How to Align the AppBar to the Left in MUI

Personalizing the label of a select input using materialui

Tips for enhancing the clarity of elements in KineticJS

Website Not Loading Correctly

Replace !important with JavaScript/jQuery when using animate()

What is the best way to display DT elements next to each other?

The Bootstraps CSS style doesn't seem to be working properly or being overridden within an Angular

php Use cURL and the DOM to extract content with specified CSS styling

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

Material-UI tutorials: Tips for fixing the "Warning: Prop `id` did not match" issue

The slider remains stationary, yet its value fluctuates

Guide on aligning a non-fixed child within a fixed parent container

Custom background options for Wordpress developer