如何设计多重代码块

如何解决如何设计多重代码块

默认情况下，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>)

解决方法

根据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>

,

我认为杰克斯的回答是正确的。似乎没有一种方法可以专门设置“.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