【问题标题】:How to override style of Material-UI hidden component?如何覆盖 Material-UI 隐藏组件的样式?
【发布时间】:2020-04-13 19:16:34
【问题描述】:

我有以下来自 Material-UI 的标签示例:

https://codesandbox.io/s/dark-rain-0ft9o

我正在尝试覆盖这个 <div class="MuiBox-root ..."> 类,它强加了一个 padding: 24px

但到目前为止我无法做到这一点,因为该 Box 组件没有在代码中声明:

 <TabPanel value={value} index={0}>
   Item One
 </TabPanel>

此框似乎放置在 TabPanel 组件中,但我无法覆盖此框样式,因为它不存在:

我怎样才能覆盖它以强加padding-top: 0px

非常感谢,

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    这是您沙箱中的相关代码:

    function TabPanel(props) {
      const { children, value, index, ...other } = props;
    
      return (
        <Typography
          component="div"
          role="tabpanel"
          hidden={value !== index}
          id={`vertical-tabpanel-${index}`}
          aria-labelledby={`vertical-tab-${index}`}
          {...other}
        >
          {value === index && <Box p={3}>{children}</Box>}
        </Typography>
      );
    }
    

    Box 位于 Typography 内,位于 TabPanel (&lt;Box p={3}&gt;{children}&lt;/Box&gt;) 内。 p={3} 表示 3 个间距单位的填充,每个单位为 8px。您可以根据需要更改此Box

    【讨论】:

    • 天哪!你救了我!我已经尝试了几个小时来更改填充,现在看来它是关于 p={3} 的。非常感谢!
    猜你喜欢
    • 2021-09-15
    • 2020-01-30
    • 2019-03-07
    • 2019-10-02
    • 1970-01-01
    • 2020-05-27
    • 2019-04-23
    • 2020-06-13
    • 1970-01-01
    相关资源
    最近更新 更多