3

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.

Deepika
  • 737
  • 7
  • 23

0 Answers0