无法编辑MuiTypography-root 局部移除其行高样式问题求解

你写的样式不生效是两个问题导致的，改完就能实现局部生效、不污染全局的需求：

• 第一个错误：line-height属性不存在none这个合法取值，浏览器会直接丢弃这条无效规则。要重置默认行高可以用unset/initial，或者直接写你需要的实际值，比如要去掉额外行高就写1。
• 第二个错误：如果你把logo类直接加在Typography组件本身，& .MuiTypography-root这个后代选择器根本选不到当前元素——它只会匹配当前元素内部、类名为MuiTypography-root的子元素，选不到挂载了logo类的节点自身。

对应场景的正确写法 #

场景1：logo类直接绑定在Typography组件上 #

不需要嵌套后代选择器，直接把行高规则写在logo样式块里即可，样式只作用在当前组件，不会全局生效：

logo: {
  color: '#26262d',
  fontWeight: '600',
  mr: '8px',
  fontSize: '1.5rem',
  lineHeight: 1, // 替换原来的非法值none，直接覆盖组件自身的默认行高
}

使用示例：

<Typography sx={logo}>站点Logo</Typography>

场景2：logo类绑定在Typography的外层容器上 #

保留嵌套写法，只需要把非法的lineHeight: 'none'改成合法值即可，样式只会作用在当前容器下的所有Typography组件，不会漏到外层影响全局：

logo: {
  // 外层容器其他自定义样式
  "& .MuiTypography-root": {
    lineHeight: 1,
  }
}

注意：只要你把样式写在组件局部的sx属性、styled组件或者CSS Modules作用域内，不要修改MUI全局主题的Typography默认配置，就不会产生全局样式污染。

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