CODEWITHSUNDEEP
reactjsmaterial-ui
dommer
dommer

Reputation: 19810

How can I set height of Material-UI Tabs component?

I'm trying to set the height of a Material-UI Tabs component to 32px. I know this isn't a great UX idea, but, I've explained that and the customer still wants it.

I tried setting the height on the Tabs component itself. Then on the Tab components inside it. The latter fixes the height to 32px, but the labels are too far down as there's an inner div that is (still) set to 48px.

The line in the source appears to be:

height: (props.label && props.icon) ? 72 : 48,

I can't work out how to override that inner div using the styles and themes exposed via Material-UI.

Upvotes: 7

Views: 23902

Answers (5)

HammerN'Songs
HammerN'Songs

Reputation: 243

Alternative/more standalone method using 'styled': This sets 100$ height on both the main outer tabs component, and its hidden inner component. You may still need to add 100% to the child Tab components themselves.

const FullHeightTabs = styled(Tabs)({
    height: '100%',
    minHeight: '100%',
    '& .MuiTabs-flexContainer': {
        height: '100%',
        minHeight: '100%'
    }
});

...

<FullHeightTabs
    value={props.mode}
    onChange={(e: React.SyntheticEvent, newMode) => {
        props.setMode(newMode);
    }}
    variant={'fullWidth'}
>
    <Tab
        label={'Mode 1'}
        value={Mode.MODE1}
        sx={{height: '100%'}}
    />
    <Tab
        label={'Mode 2'}
        value={Mode.MODE2}
    />
</FullHeightTabs>

Upvotes: 0

Venca
Venca

Reputation: 71

You can modify height of Tabs component by adding sx property defining both minHeight and height. It needs to be both.

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="Navigation tabs"
  sx={{ minHeight: "30px", height: "30px" }}
></Tabs>

Upvotes: 3

Nufayl
Nufayl

Reputation: 494

If you need it to be apply globally. You can add into the theme provider as overrides.

See the example for the tab :

import {createMuiTheme} from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        minHeight: 70
      }
    }
  }
});

// Under App 

const App = () => (
  <MuiThemeProvider theme={theme}>
    ....
  </MuiThemeProvider>
)

See the doc for more information material-ui globals

Upvotes: 1

RocketKittens
RocketKittens

Reputation: 449

const tabHeight = '24px' // default: '48px'
const useStyles = makeStyles(theme => ({
  tabsRoot: {
    minHeight: tabHeight,
    height: tabHeight
  },
  tabRoot: {
    minHeight: tabHeight,
    height: tabHeight

  }
}));

<Tabs
  classes={{
    root: classes.tabsRoot,
  }}>
 <Tab
   classes={{
     root: classes.tabRoot
   }} />
 <Tab
   classes={{
     root: classes.tabRoot
    }} />
 <Tab
   classes={{
     root: classes.tabRoot
    }} />
</Tabs

Technique based on 'Customizing Components' Option 1: Overriding styles with classes

Upvotes: 6

Kevin Fiddick
Kevin Fiddick

Reputation: 19

I added the inline styling component like so:

<Tabs
  style={{height: "32px"}}
>

This worked for me, hope it works for you as well

Source: https://material-ui.com/customization/overrides/

Upvotes: 1

Related Questions