@material-ui/core#createStyles JavaScript Examples

The following examples show how to use @material-ui/core#createStyles. 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: GlobalStyles.js    From flame-coach-web with MIT License 6 votes vote down vote up 
useStyles = makeStyles(() => createStyles({
  "@global": {
    "*": {
      boxSizing: "border-box",
      margin: 0,
      padding: 0
    },
    html: {
      "-webkit-font-smoothing": "antialiased",
      "-moz-osx-font-smoothing": "grayscale",
      height: "100%",
      width: "100%"
    },
    body: {
      backgroundColor: "#f4f6f8",
      height: "100%",
      width: "100%"
    },
    a: {
      textDecoration: "none"
    },
    "#root": {
      height: "100%",
      width: "100%"
    }
  }
}))
Example #2
Source File: Slicer.jsx    From viv with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    enabled: {},
    disabled: {
      color: theme.palette.text.disabled,
      // Because of the .5 opacity of the disabled color in the theme, and the fact
      // that there are multiple overlaid parts to the slider,
      // this needs to be set manually for the desired effect.
      '& .MuiSlider-thumb': {
        color: 'rgb(100, 100, 100, 1.0)'
      },
      '&  .MuiSlider-track': {
        color: 'rgb(100, 100, 100, 1.0)'
      }
    }
  })
)
Example #3
Source File: Page.jsx    From mfe-webpack-demo with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    root: {
      flex: 1
    },
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3)
    }
  })
)
Example #4
Source File: SideNav.jsx    From mfe-webpack-demo with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    drawer: {
      width: drawerWidth,
      flexShrink: 0
    },
    drawerPaper: {
      width: drawerWidth
    },
    toolbar: {
      ...theme.mixins.toolbar,
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    }
  })
)
Example #5
Source File: Page.jsx    From module-federation-examples with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    root: {
      flex: 1,
    },
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
)
Example #6
Source File: SideNav.jsx    From module-federation-examples with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },
    toolbar: {
      ...theme.mixins.toolbar,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
  }),
)
Example #7
Source File: post.js    From gatsby-markdown-material-typescript-starter with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) =>
  createStyles({
    right: {
      float: 'right'
    },
    left: {
      float: 'left'
    },
  }),
)
Example #8
Source File: Gravatars.jsx    From Gameplayer with MIT License 6 votes vote down vote up 
gravatarStyles = theme =>
  createStyles({
    actionArea: {
      maxWidth: 300,
    },
    image: {
      height: 150,
    },
    displayName: {
      textOverflow: 'ellipsis',
      overflow: 'hidden',
    },
    id: {
      textOverflow: 'ellipsis',
      overflow: 'hidden',
    },
    owner: {
      textOverflow: 'ellipsis',
      overflow: 'hidden',
    },
  })
Example #9
Source File: App.jsx    From mfe-webpack-demo with MIT License 5 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    root: {
      display: "flex"
    }
  })
)
Example #10
Source File: App.jsx    From module-federation-examples with MIT License 5 votes vote down vote up 
useStyles = makeStyles(theme =>
  createStyles({
    root: {
      display: 'flex',
    },
  }),
)
Example #11
Source File: Error.jsx    From Gameplayer with MIT License 5 votes vote down vote up 
errorStyles = theme =>
  createStyles({
    errorText: {
      fontFamily: 'Inconsolata, Monaco, monospace',
    },
  })
Example #12
Source File: Filter.jsx    From Gameplayer with MIT License 5 votes vote down vote up 
filterStyles = theme =>
  createStyles({
    orderBySelect: {
      marginLeft: theme.spacing.unit,
    },
  })
Example #13
Source File: Gravatars.jsx    From Gameplayer with MIT License 5 votes vote down vote up 
gravatarsStyles = theme =>
  createStyles({
    title: {
      marginTop: theme.spacing.unit * 2,
    },
  })