How to use @material-ui/core - 10 common examples

To help you get started, we’ve selected a few @material-ui/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github GraphnomiQl / GraphnomiQL / src / containers / modalContainer.jsx View on Github external
placeholder="Insert Introspection Result Here"
                  onChange={handleUpload}
                />
                <Button onClick={() => { changeSchema(currentSchema, uploadedText); handleClose(); handleSelectedSchema(); clearGraph(); renderNode(); }}>
                  Visualize Schema
                </Button>
              </FormControl>
            </form>
          </div>
        </Modal>
      </div>
    );
  }
}
// material ui - wrapping modal container with the material ui styling
const SimpleModalWrapped = withStyles(styles)(ModalContainer);

export default connect(mapStateToProps, mapDispatchToProps)(SimpleModalWrapped);
github foxfolio / foxfolio-desktop / app / pages / portfolio / components / PortfolioPosition.tsx View on Github external
},
    right: {
      textAlign: 'right',
    },
  });

// TODO Use connect to get coinlist, ticker and settings
interface Props extends WithStyles<typeof styles> {
  asset: string;
  coinlist: Coinlist;
  ticker: Ticker;
  portfolio: PortfolioForAsset;
  settings: SettingsType;
}

export const PortfolioPosition = withStyles(styles)(
  ({ asset, classes, portfolio, coinlist, ticker, settings }: Props) => {
    const quantity = portfolio.total;
    const tickerEntries = getTickerEntries(ticker, asset, [
      settings.cryptoCurrency,
      settings.fiatCurrency,
    ]);

    return (
      <ExpandableCard
        collapseContent={
          <TokenLineChart
            fsym={asset}
            tsym={
              settings.currencyFocus === 'crypto' && asset !== settings.cryptoCurrency
                ? settings.cryptoCurrency
                : settings.fiatCurrency
github redgeoff / mson-react / src / fields / display-value-typography.js View on Github external
});

class DisplayValueTypography extends React.PureComponent {
  render() {
    const { children, classes } = this.props;

    // We use a span tag so that the element is inline
    return (
      <Typography variant="subtitle1" component="span" className={classes.root}>
        {children}
      </Typography>
    );
  }
}

export default withStyles(styles)(DisplayValueTypography);
github mui-org / material-ui / docs / src / modules / styles / getPageContext.js View on Github external
function getTheme(uiTheme) {
  const theme = createMuiTheme({
    direction: uiTheme.direction,
    nprogress: { color: uiTheme.paletteType === 'light' ? '#000' : '#fff' },
    palette: { ...uiTheme.paletteColors, type: uiTheme.paletteType },
  });

  // Expose the theme as a global variable so people can play with it.
  if (process.browser) {
    window.theme = theme;
  }

  return theme;
}
github mui-org / material-ui / docs / src / pages / premium-themes / tweeper / theme / tweeper / variables.js View on Github external
import { createMuiTheme } from '@material-ui/core/styles';
import classes from '../core/classes';

const primary = {
  main: '#1da1f2',
  dark: '#1a91da',
};

const theme = createMuiTheme({
  typography: {
    fontSize: 15,
    fontWeightRegular: 500,
    // Use the system font instead of the default Roboto font.
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
github mapseed / platform / src / base / static / components / molecules / login-modal.tsx View on Github external
>
      <ListItemIcon css={{ minWidth: "32px" }}>
        <SocialIcon fill={"#fff"} />
      </ListItemIcon>
      <ListItemText css={{ flex: "0 1 auto" }}>
        <Typography css={{ textAlign: "center", color: "#fff" }}>
          {/* capitalize the first letter of the provider name: */}
          {loginProvider.name.charAt(0).toUpperCase() +
            loginProvider.name.substring(1)}
        </Typography>
      </ListItemText>
    </ListItem>
  );
};

const useStyles = makeStyles(() =>
  createStyles({
    button: {
      position: "absolute",
    },
  }),
);

type Props = {
  appConfig: AppConfig;
  disableRestoreFocus?: boolean;
  render: (openModal: () => void) => React.ReactNode;
};

const LoginModal = ({
  appConfig,
  disableRestoreFocus = false,
github marmelab / react-admin / packages / ra-ui-materialui / src / button / DeleteWithUndoButton.js View on Github external
const useStyles = makeStyles(theme => ({
    deleteButton: {
        color: theme.palette.error.main,
        '&:hover': {
            backgroundColor: fade(theme.palette.error.main, 0.12),
            // Reset on mouse devices
            '@media (hover: none)': {
                backgroundColor: 'transparent',
            },
        },
    },
}));
github marmelab / react-admin / packages / ra-tree-ui-materialui / src / DeleteWithConfirmMenuItem.tsx View on Github external
const styles = theme =>
    createStyles({
        deleteButton: {
            color: theme.palette.error.main,
            '&:hover': {
                backgroundColor: fade(theme.palette.error.main, 0.12),
                // Reset on mouse devices
                '@media (hover: none)': {
                    backgroundColor: 'transparent',
                },
            },
        },
    });
github kubeflow-kale / kale / labextension / src / widgets / KatibDialog.tsx View on Github external
export const KatibDialog: React.FunctionComponent<KabitDialog> = props => {
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [pipelineParameters, setPipelineParameters] = React.useState([]);
  const [pipelineMetrics, setPipelineMetrics] = React.useState([]);

  const theme = useTheme();

  React.useEffect(() => {
    // this is called when `open` changes value.
    // We are interested in the case when `open` becomes true.
    if (props.open) {
      // send RPC to retrieve current pipeline parameters and
      // update the state
      onKatibShowPanel();
    }
  }, [props.open]);

  const onKatibShowPanel = async () => {
    // Send an RPC to Kale to get the pipeline parameters
    // that are currently defined in the notebook
    const nbFilePath = props.activeNotebook.context.path;
    const args = { source_notebook_path: nbFilePath };
github mui-org / material-ui / docs / src / modules / components / AppSearch.js View on Github external
export default function AppSearch() {
  const classes = useStyles();
  const inputRef = React.useRef(null);
  const theme = useTheme();
  const userLanguage = useSelector(state => state.options.userLanguage);

  React.useEffect(() => {
    const styleNode = loadCSS(
      'https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css',
      document.querySelector('#app-search'),
    );

    return () => {
      styleNode.parentElement.removeChild(styleNode);
    };
  }, []);

  React.useEffect(() => {
    const handleKeyDown = event => {
      // Use event.keyCode to support IE 11