Reputation: 43
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>)
Upvotes: 1
Views: 4895
Reputation: 1
I wanted to change the color of the text if the editor is disabled. This worked for me:
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 })
}
/>)
Mui5, React17, Typescript
Upvotes: 0
Reputation: 31
This bit allows you to do a bit more with the customization, like auto-sizing the block of code, adjusting the line-height, for example:
overrides: {
MUIRichTextEditor: {
root: {
'& div[class^="CodeBlock"]': {
'background-color': theme.palette.background.paper,
color: theme.palette.text.secondary,
'display': 'inline-block',
'line-height': 0
}
}, ...
However, Jake's code might also work like the following:
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
}
}
]}
/>
Upvotes: 0
Reputation: 43
Jakes answer is correct I think. There does not seem to be a way to style the '.CodeBlock' specifically. I opened a ticket with mui-rte. I was able to code a fairly nice looking dark mode editor with a readable '.CodeBlock' as follows:
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
Upvotes: 3
Reputation: 4255
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>
Upvotes: 0