如何为mui-rte的CodeBlock配置适配MUI深色主题的自定义样式

之前写的主题配置不生效的原因很简单：MUIRichTextEditor内置的CodeBlock没有注册成可供MUI主题识别的独立组件键值，直接在overrides里写CodeBlock节点的配置，根本匹配不到实际渲染的DOM元素，自然不会生效。
整个方案不需要改动你现有的「基于亮度动态切换全局MUI主题」的架构，只需要补充对应样式匹配规则即可：

• 修正主题配置结构，匹配CodeBlock实际渲染的DOM类名
  该组件渲染CodeBlock块时，会给对应的代码容器加上.MUIRichTextEditor-codeBlock类名，不需要自定义组件注册，直接在主题的全局样式节点下匹配这个类名，就可以实现跟随明暗主题切换样式的效果，示例配置：

  const darkTheme = createMuiTheme({
    palette: {
      // 保留原有主题明暗切换逻辑，此处对应深色模式
      mode: 'dark'
    },
    overrides: {
      MuiCssBaseline: {
        '@global': {
          '.MUIRichTextEditor-codeBlock': {
            backgroundColor: '#37474F',
            color: '#fff',
            margin: 0,
            padding: '16px',
            borderRadius: 4
          }
        }
      }
    }
  })
  

  浅色主题则对应补充匹配同个类名的浅色样式即可：

  '.MUIRichTextEditor-codeBlock': {
    backgroundColor: '#f5f5f5',
    color: 'rgba(0,0,0,0.87)'
  }
  

• 原有组件调用结构无需调整，保持现有的主题传参逻辑即可：

  const MyEditor = (props: IProps) => {
    return (
      <MuiThemeProvider theme={getTheme(props.brightness)}>
        <MUIRichTextEditor 
          defaultValue="" 
          label="Type something here..." 
          onSave={save} 
          inlineToolbar={true} 
        />
      </MuiThemeProvider>
    )
  }
  

异常根因说明：出现白字白底完全不可读的问题，本质是MUI深色模式会全局将代码类标签的文字颜色自动切换为白色，但CodeBlock默认硬编码了固定白色背景，没有跟随主题变量联动切换，只要通过主题覆盖把背景值调整为深色模式对应的深色调，即可解决显示冲突。

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