Reactjs 无法覆盖MUI工具栏上的左右填充，除非使用！重要

发布于04月13日

我使用Nextjs 14从MUI 5.15.15获得这个Toolbar组件

它的默认右和左填充为"24 px"，我无法使用在MUI文档上找到的任何记录方法来重写这些填充.

我try 过的是:

1 - Overriding root styles in the theme object

components: {
  MuiToolbar: {
      styleOverrides: {
        root: {
          paddingRight: '0',
          paddingLeft: '0',
        },
      },
    },
}

除非我加!important，否则这是行不通的

2 - Using `styled`

const StyledToolbar = styled(Toolbar)<ToolbarProps>(() => ({
  padding: '40px 114px',
}))

再说一次，除非我添加!important，否则这才有效.

3 - Same thing when using the `sx` attribute

如果我必须添加!important标志，那么这些解决方案的意义何在？我一定错过了什么，但又想不出是什么.

推荐答案

这个问题与CSS特性和MUI生成的样式的顺序有关，直接通过MXprops 或主题中添加到组件的样式将规则添加到根元素，如果我们判断开发工具，在使用了MXprops 后，例如，您会注意到媒体查询类的顺序覆盖了我们添加的样式:

 <Toolbar sx={{ paddingRight: 0, paddingLeft: 0 }}>
    ...
 </Tollbar>

因此，为了解决这个问题，我们需要增加特定性或更改MUI生成的样式的顺序.

对于第二个选项，我注意到当向CSS添加媒体查询类时，它会被注入到其他媒体查询下面，所以我们可以添加下面的类，它会起作用，因为它们具有相同的特异性，最后一个会获胜.:

<Toolbar
        sx={{
          "@media (min-width: 0px)": { paddingRight: 0, paddingLeft: 0 },
        }}
      >
...

更好的方法是增加我们使用的类的特定性，如果我们使用文档中使用的AppBar，我们可以从中 Select 子元素，它将具有更高的特定性，如下所示:

  <AppBar position="static" sx={{ "& .MuiToolbar-root": { padding: 0 } }}>
      <Toolbar sx={{ padding: 0 }}>
      ...

这将添加父类的类+子类的类，因此由于其特定性更高，它将覆盖任何媒体查询样式.

Reactjs相关问答推荐

在一个地方调用函数会影响其他地方调用该函数

有没有办法让两个状态在两次精准渲染中更新？

如何在MUI X数据网格列中显示IMG？

如何用Reaction做交互式的MathML？

如何在单击行中的图标时避免选中ionic 复选框？

如何在MUI x图表条形图上放置圆角？

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

Gitlab CI和VITE环境变量出现问题

在reactjs中刷新页面时丢失状态值

如何使用服务器中的数据自动填充表单字段？

将 useState 设置为组件内部的值

使用 axios 响应路由 Dom 操作

RTK 查询Mutations 在 StrictMode 中执行两次

需要在窗口调整大小时更新 React 组件

在 React 中将路径与查询变量匹配

Wordpress 插件在激活时创建一个 React Public 页面

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

当页面重新加载react 路由导航到第一页 v6

为什么这两个 div 的渲染方式不同？

我想将悬停 colored颜色更改为红色.写了一个话题，这个元素没有react ，怎么解决呢？

实用课程推荐

1 - Overriding root styles in the theme object

2 - Using styled

3 - Same thing when using the sx attribute

推荐答案

Reactjs相关问答推荐

2 - Using `styled`

3 - Same thing when using the `sx` attribute