如何样式化 mui-rte CodeBlock

Question

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

Answer 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>

Answer 2

我认为 Jakes 的回答是正确的。似乎没有办法专门设置“.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

Answer 3

这个位允许你做更多的自定义，比如auto-sizing代码块，调整line-height，例如：

overrides: {
  MUIRichTextEditor: {
    root: {
      '& div[class^="CodeBlock"]': {
        'background-color': theme.palette.background.paper,
        color: theme.palette.text.secondary,
        'display': 'inline-block',
        'line-height': 0
      }
    }, ...

但是，Jake 的代码也可能像下面这样工作：

import MUIRichTextEditor from 'mui-rte';
import CodeIcon from '@mui/icons-material/Code';

<MUIRichTextEditor 
  controls={["my-codeblock"]}
  customControls={[
    {
      name: "my-codeblock",
      icon: <CodeIcon />,
      type: "inline",
      inlineStyle: {
        bgcolor: theme.palette.background.paper,
        color: theme.palette.text.secondary,
        'display': 'inline-block',
        'line-height': 0
        }
      }
  ]}
/>

Answer 4

如果编辑器被禁用，我想更改文本的颜色。这对我有用：

    const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        editorReadonly: {
            color: MBTheme.palette.grey[500],
        },
    })
    );

function TaskFormFields(props: EditTaskProps) {
    const translate = useTranslation();
    const intl = useIntl();

    const classes = useStyles();
           .
           .
           .


 return (
            <MUIRichTextEditor
                classes={{ editorReadOnly: classes.editorReadonly }}
                ref={rteRef as unknown as React.Ref<TMUIRichTextEditorRef>}
                readOnly={props.readonly}
                defaultValue={task.content ? ensureRichtText(task.content ?? '') : ''}
                label={props.readonly ? '' : translate('task_content')}
                onBlur={() => rteRef.current?.save()}
                onSave={(data: string) =>
                    task.content !== data && props.onChange && props.onChange({ ...task, content: data })
                }
            />)

梅5, 反应17，打字稿

如何样式化 mui-rte CodeBlock

How to style mui-rte CodeBlock

rich-text-editor

reactjs

material-ui