Material UI Button contained样式在Transition组件中失效问题咨询

Hey there! I've run into a similar issue with Material-UI's ButtonGroup and Transition components before, so let me help you fix this.

The Root Problem #

The issue happens because the ButtonGroup passes its own variant (in your case, text) to all child elements via React context. Even though you explicitly set variant="contained" on your inner Button, the ButtonGroup's context overrides this setting—since the Slide component doesn't block context propagation, the Button ends up rendering as a text variant instead of showing the contained background.

Solutions #

Solution 1: Wrap the Button in a Context-Blocking Container

The simplest fix is to wrap your Button in a basic container (like Box or a plain div) that won't pass along the ButtonGroup's context. This lets the Button respect its own variant setting:

import { ButtonGroup, Button, Slide, Box } from '@material-ui/core';

<ButtonGroup variant="text" color="primary" aria-label="menu" id="buttongroup">
  {sections.map(x => (
    <Button 
      onClick={() => window.location.href = `#${x.name.toLowerCase()}`} 
      key={x.name}
    >
      {x.name}
    </Button>
  ))}
  <Button onClick={() => window.open('tel:00918779839201')}>(+91) 8779839201</Button>
  <Slide 
    direction="left" 
    in={useScrollTrigger({threshold: document.documentElement.clientHeight/1.5})} 
    mountOnEnter 
    unmountOnExit
  >
    {/* Add Box wrapper to block ButtonGroup context */}
    <Box>
      <Button variant="contained" color="primary">Schedule Site Visit</Button>
    </Box>
  </Slide>
</ButtonGroup>

I added color="primary" to the contained Button to ensure it uses the themed background color—adjust this to secondary or another color if needed.

Solution 2: Explicitly Override Button Styles

If the context issue persists, you can force the contained styling with custom CSS using makeStyles:

import { makeStyles } from '@material-ui/core/styles';
import { ButtonGroup, Button, Slide } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  forcedContained: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(1, 2),
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
    },
  },
}));

// Inside your component
const classes = useStyles();

<ButtonGroup variant="text" color="primary" aria-label="menu" id="buttongroup">
  {/* ... other buttons ... */}
  <Slide {...yourProps}>
    <Button className={classes.forcedContained}>Schedule Site Visit</Button>
  </Slide>
</ButtonGroup>

Solution 3: Move the Button Outside the ButtonGroup

If your layout allows, placing the contained Button adjacent to the ButtonGroup completely avoids the context conflict:

<div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing(1) }}>
  <ButtonGroup variant="text" color="primary" aria-label="menu" id="buttongroup">
    {/* ... other buttons ... */}
  </ButtonGroup>
  <Slide {...yourProps}>
    <Button variant="contained" color="primary">Schedule Site Visit</Button>
  </Slide>
</div>

I'd start with Solution 1—it's the cleanest and most aligned with Material-UI's intended behavior. Let me know if you hit any other snags!

内容的提问来源于stack exchange，提问作者Ange Loron