@mui/material#adaptV4Theme JavaScript Examples

The following examples show how to use @mui/material#adaptV4Theme. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ColoredButton.js    From react-saas-template with MIT License 6 votes vote down vote up 
function ColoredButton(props) {
  const { color, children, theme } = props;
  const buttonTheme = createTheme(adaptV4Theme({
    ...theme,
    palette: {
      primary: {
        main: color
      }
    }
  }));
  const buttonProps = (({ color, theme, children, ...o }) => o)(props);
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={buttonTheme}>
        <Button {...buttonProps} color="primary">
          {children}
        </Button>
      </ThemeProvider>
    </StyledEngineProvider>
  );
}
Example #2
Source File: DateTimePicker.js    From react-saas-template with MIT License 6 votes vote down vote up 
Theme2 = (theme) =>
  createTheme(
    adaptV4Theme({
      ...theme,
      overrides: {
        MuiOutlinedInput: {
          root: {
            width: 190,
            "@media (max-width:  400px)": {
              width: 160,
            },
            "@media (max-width:  360px)": {
              width: 140,
            },
            "@media (max-width:  340px)": {
              width: 120,
            },
          },
          input: {
            padding: "9px 14.5px",
          },
        },
      },
    })
  )
Example #3
Source File: theme.js    From react-saas-template with MIT License 4 votes vote down vote up 
theme = createTheme(adaptV4Theme({
  palette: {
    primary: { main: primary },
    secondary: { main: secondary },
    common: {
      black,
      darkBlack
    },
    warning: {
      light: warningLight,
      main: warningMain,
      dark: warningDark
    },
    // Used to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.
    tonalOffset: 0.2,
    background: {
      default: background
    },
    spacing
  },
  breakpoints: {
    // Define custom breakpoint values.
    // These will apply to Material-UI components that use responsive
    // breakpoints, such as `Grid` and `Hidden`. You can also use the
    // theme breakpoint functions `up`, `down`, and `between` to create
    // media queries for these breakpoints
    values: {
      xl,
      lg,
      md,
      sm,
      xs
    }
  },
  border: {
    borderColor: borderColor,
    borderWidth: borderWidth
  },
  overrides: {
    MuiExpansionPanel: {
      root: {
        position: "static"
      }
    },
    MuiTableCell: {
      root: {
        paddingLeft: spacing * 2,
        paddingRight: spacing * 2,
        borderBottom: `${borderWidth}px solid ${borderColor}`,
        [`@media (max-width:  ${sm}px)`]: {
          paddingLeft: spacing,
          paddingRight: spacing
        }
      }
    },
    MuiDivider: {
      root: {
        backgroundColor: borderColor,
        height: borderWidth
      }
    },
    MuiPrivateNotchedOutline: {
      root: {
        borderWidth: borderWidth
      }
    },
    MuiListItem: {
      divider: {
        borderBottom: `${borderWidth}px solid ${borderColor}`
      }
    },
    MuiDialog: {
      paper: {
        width: "100%",
        maxWidth: 430,
        marginLeft: spacing,
        marginRight: spacing
      }
    },
    MuiTooltip: {
      tooltip: {
        backgroundColor: darkBlack
      }
    },
    MuiExpansionPanelDetails: {
      root: {
        [`@media (max-width:  ${sm}px)`]: {
          paddingLeft: spacing,
          paddingRight: spacing
        }
      }
    }
  },
  typography: {
    useNextVariants: true
  }
}))