Воссоздание этой темы. js to theme.tsx - PullRequest
Новая
       4

Воссоздание этой темы. js to theme.tsx

0 голосов
/ 15 апреля 2020

Ссылка на проект Github

Я пытаюсь воссоздать эту тему Material-UI. js, чтобы набирать текст и внедрять в компоненты, используя 

const useStyles = makeStyles(theme => ({
  estimateButton: {
    ...theme.typography.estimate,
    backgroundColor: theme.palette.common.orange,
    borderRadius: 50,
    height: 45,
    width: 145,
    marginRight: 40,
    "&:hover": {
      backgroundColor: theme.palette.secondary.light
    }

Я попытался использовать модуль расширения, который был на материалах документа UI. Я также просматривал подобные вопросы здесь, в StackOverflow, но до сих пор не могу заставить его работать. Такое чувство, что сделать эту работу в jsx проще по сравнению с машинописью, но я все же хотел бы узнать, как она работает.

Тема. js

Я пытался использовать это решение из одного из ответов здесь, но, похоже, не работает 

import createMuiTheme, {
  Theme,
  ThemeOptions,
} from "@material-ui/core/styles/createMuiTheme";
import { makeStyles } from "@material-ui/core";
import { Typography } from "@material-ui/core/styles/createTypography";

interface ITypography extends Typography {
  tab: {
    fontFamily: String;
    textTransform: String;
    fontWeight: Number;
    color: String;
    fontSize: String;
  };
}
interface ITheme extends Theme {
  typography: ITypography;
}
interface IThemeOptions extends ThemeOptions {
  typography: ITypography;
}

const theme = createMuiTheme({
  typography: {
    fontWeightMedium: 600,
    fontFamily: ["Open Sans", "Arial", "sans-serif"].join(","),
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontWeight: 700,
      color: "white",
      fontSize: "1rem",
    },
  },
} as IThemeOptions); // Use customized ThemeOptions type

const useStyles = makeStyles((theme: ITheme) => ({
  // Use customized Theme type
  root: {
    ...theme.typography.tab, // Work with no type error
  },
}));
...