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

placeholder="Insert Introspection Result Here"
                  onChange={handleUpload}
                />
                <button> { changeSchema(currentSchema, uploadedText); handleClose(); handleSelectedSchema(); clearGraph(); renderNode(); }}&gt;
                  Visualize Schema
                </button>
              
            
          
        
      
    );
  }
}
// material ui - wrapping modal container with the material ui styling
const SimpleModalWrapped = withStyles(styles)(ModalContainer);

export default connect(mapStateToProps, mapDispatchToProps)(SimpleModalWrapped);

},
    right: {
      textAlign: 'right',
    },
  });

// TODO Use connect to get coinlist, ticker and settings
interface Props extends WithStyles {
  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 (

});

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

    // We use a span tag so that the element is inline
    return (
      
        {children}
      
    );
  }
}

export default withStyles(styles)(DisplayValueTypography);

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;
}

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(','),

>
      
        
      
      
        
          {/* capitalize the first letter of the provider name: */}
          {loginProvider.name.charAt(0).toUpperCase() +
            loginProvider.name.substring(1)}
        
      
    
  );
};

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

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

const LoginModal = ({
  appConfig,
  disableRestoreFocus = false,

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',
            },
        },
    },
}));

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',
                },
            },
        },
    });

export const KatibDialog: React.FunctionComponent = 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 };

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