主页 / coding / 问题 / 78927091
Accepted
Julia
Asked: 2024-08-29 17:32:50 +0800 CST

如何在 React 组件上使用 mui 样式并改变包装组件内的样式？

  • 772

在下面的代码中：我如何更改 SpecialTabs 中 Header 内的 border-bottom 属性？谢谢！

const SpecialTabs = () => {
  const Header = styled.div`
  position: relative;
  border-bottom: 1px solid red;
`;
  return (
    <Header>
      <Tabs>
        ...
      </Tabs>
    </Header>
  )
}

const StyledTabs = styled(SpecialTabs)(() => ({
  " & .Mui-disabled": {
    padding: 0,
  },
}));

const App = () => {
  return (
    <StyledTabs>
      ...
    </StyledTabs>
  )
}

我尝试过（但没有效果）：

const StyledTabs = styled(SpecialTabs)(() => ({
  " & .Mui-disabled": {
    padding: 0,
  },
  borderBottom: "none"
}));
reactjs

1 个回答

  1. Best Answer

    一种方法是使用 prop 有条件地渲染边框，如下所示：

    const Header = styled('div')(({ removeBorder }) => ({   
  borderBottom: removeBorder ? 'none' : '1px solid red', 
}));

    Header比像这样 使用<Header removeBorder={true}>

    它看起来App就像这样

    <StyledTabs removeBorder> ... </StyledTabs>

    这是小提琴，你可以看看 -> FIDDLE

    另一种方法可能是传递className给Header，但我还没有测试过，所以我无法确认

    <Header className="header">并将其定位于StyledTabs

    '& .header': { border: none }

    • 0

相关问题