TinyMCE Wrapper Theme using Material-UI and React

minimal.js

// This file will live in `editor/themes/minimal.js`

import React from "react";
import { Grid, withStyles } from "@material-ui/core";

export const Minimal = withStyles(theme => ({
  root: {
    "& .tox .tox-tbtn svg": {
      fill: theme.palette.grey["500"]
    },
    "& .tox .tox-tbtn:hover svg": {
      fill: theme.palette.common.white
    },
    "& .tox .tox-tbtn": {
      transition: "background-color 0.3s ease"
    },
    "& .tox .tox-tbtn:hover, & .tox .tox-tbtn:active, & .tox .tox-tbtn:focus": {
      backgroundColor: theme.palette.grey["500"],
      cursor: "pointer"
    },
    "& .tox-tinymce": {
      borderRadius: theme.shape.borderRadius
    },
    "& .tox .tox-toolbar__primary": {
      backgroundColor: theme.palette.grey["100"],
      backgroundImage: "none",
      padding: theme.spacing(2)
    },
    "& .tox .tox-edit-area__iframe": {
      borderTop: `1px solid ${theme.palette.grey["400"]}`
    },
    "& .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type)": {
      border: "transparent"
    },
    "& .tox-toolbar-overlord .tox-toolbar__primary .tox-toolbar__group:last-child": {
      marginLeft: "auto"
    }
  }
}))(Grid);