I am currently working on SunEditor-React NPM package. Some of the designs are making my template un-aligned. So I am planning to override the css and only use the needed css.
Currently in my project I am using Material UI makeStyles to style my components.
This is my current style sheet for the component.
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(({ spacing, palette: { gray } }) => ({
container: {
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
paddingBottom: spacing(6),
textAlign: 'center',
},
title: {
margin: spacing(1.5, 0, 1),
},
subtitle: { color: gray.dark, marginBottom: spacing(4) },
htmlPreview: {
pointerEvents: 'none',
},
loader: {
position: 'static',
width: '100%',
height: spacing(40),
},
}));
I need to write this css in to the above makeStyles.
.sun-editor .se-container {
display: flex;
flex-direction: column-reverse;
}
.sun-editor .se-wrapper .se-wrapper-inner {
height: 100% !important;
max-height: 23em;
}
.sun-editor .se-wrapper .se-placeholder {
padding-left: 5px !important;
padding-right: 5px !important;
padding-top: 5px !important;
}
.sun-editor-editable {
padding: 5px !important;
}
.sun-editor .se-toolbar-cover {
padding: 5px;
}
Can anyone please help me to do this. Thank you in advance.