如何设置 mui-rte CodeBlock 的样式答案

【问题标题】：How to style mui-rte CodeBlock如何设置 mui-rte CodeBlock 的样式
【发布时间】：2021-07-19 07:21:45
【问题描述】：

默认情况下，CodeBlock 的样式为白色背景和黑色。这适用于“浅色”调色板，但无法使用“深色”调色板，因为使用“深色”调色板，背景保持白色，而颜色也变为白色。我可以应用基于调色板的主题，但不知道如何设置 CodeBlock 的样式。我想做类似以下的事情：

const darkTheme = createMuiTheme()

Object.assign(darkTheme, {
   overrides: {
      CodeBlock: {
         root: {
            backgroundColor: '#37474F',
            color: '#fff',
         },
      },
   ....
 })
  ....    

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

【问题讨论】：

标签： reactjs material-ui rich-text-editor

【解决方案1】：

根据docs，可以使用inlineStyle设置背景颜色。

例子：

import MUIRichTextEditor from 'mui-rte'
import InvertColorsIcon from '@material-ui/icons/InvertColors'

<MUIRichTextEditor 
    controls={["my-style"]}
    customControls={[
        {
            name: "my-style",
            icon: <InvertColorsIcon />,
            type: "inline",
            inlineStyle: {
                backgroundColor: "black",
                color: "white"
            }
        }
    ]}
/>

根据文档的另一个选项：

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
import MUIRichTextEditor from 'mui-rte'

const defaultTheme = createMuiTheme()

Object.assign(defaultTheme, {
    overrides: {
        MUIRichTextEditor: {
            root: {
                marginTop: 20,
                width: "80%"
            },
            editor: {
                borderBottom: "1px solid gray" 
            }
        }
    }
})

<MuiThemeProvider theme={defaultTheme}>
    <MUIRichTextEditor 
        label="Type something here..."
    />
</MuiThemeProvider>

【讨论】：

此代码将在工具栏中放置一个 MuiIconButton，用于切换内联样式。我对此进行了测试，它可以切换内联样式（它的作用类似于“荧光笔”按钮），但不设置 CodeBlock 的样式
再次检查答案。我用文档提供的另一个示例对其进行了更新。我认为问题在于您将覆盖命名为 CodeBlock 而不是 MuiRichTextEditor
这是我开始使用的代码示例。使用这个想法，我已经能够为几个类设置样式。一切看起来都很棒，并且根据用户选择的亮度正常工作，除了 CodeBlock。 CodeBlock 仍然让我难以捉摸。
也许尝试使用与root 不同的类。我不确定哪个类指的是 CodeBlock，但您可以在此处查看不同的类 - github.com/niuware/mui-rte/blob/master/src/…。也许在 editorContainer 类中定义 CSS 就是答案？
您是否尝试过使用 Chrome DevTools 之类的工具检查元素，以确切了解哪个类负责设置 CodeBlock 的背景颜色样式？

【解决方案2】：

我认为杰克斯的回答是正确的。似乎没有办法专门设置“.CodeBlock”的样式。我用mui-rte开了一张票。我能够使用可读的“.CodeBlock”编写一个相当漂亮的暗模式编辑器，如下所示：

const darkTheme = createMuiTheme()

Object.assign(darkTheme, {
   overrides: {
      MuiIconButton: {
         root: {
            color: '#fff',
         },
      },
      MUIRichTextEditor: {
         root: {
            '& pre': {
               color: '#212121',
            },
         },
         editor: {
            padding: '20px',
            height: '200px',
            maxHeight: '200px',
            overflow: 'auto',
         },
         placeHolder: {
            paddingLeft: 20,
            width: 'inherit',
            position: 'static',
         },
         anchorLink: {
            color: '#FFEB3B',
            textDecoration: 'underline',
         },
      },
   },
})

interface IProps {
   brightness: string
}

const MyEditor = (props: IProps) => {
   return (
      <div>
         <form onSubmit={handleSubmit} style={{ overflow: 'auto' }}>
            <TextField>ff</TextField>
            <MuiThemeProvider theme={getTheme(props.brightness)}>
               <MUIRichTextEditor defaultValue="" label="Type something here..." onSave={save} inlineToolbar={true} />
            </MuiThemeProvider>
            <br />
            <Button variant="contained" color="primary" type="submit">
               submit
            </Button>
         </form>
      </div>
   )
}

export default MyEditor

【讨论】：