By default the CodeBlock is styled with a white-ish background and black-ish color. This works fine with a "light" palette but is unreadable with a "dark" palette because with a "dark" palette the background stays white while the color also becomes to white. I can apply a theme based on palette but can't figure out how to style the CodeBlock. I would like to do something like the following:
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>)
According to the docs, you can use inlineStyle
to set the background color.
Example:
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"
}
}
]}
/>
Another option according to the docs:
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>