时间戳

首页 > 解决方案 > 如何设置 mui-rte CodeBlock 的样式

reactjs - 如何设置 mui-rte CodeBlock 的样式

问题描述

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

标签： reactjsmaterial-uirich-text-editor

解决方案

根据文档，您可以使用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>

推荐阅读