@material-ui/styles#StylesProvider JavaScript Examples

The following examples show how to use @material-ui/styles#StylesProvider. 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: _app.js    From nextjs-material-ui-boilerplate with MIT License 6 votes vote down vote up 
render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        <Head>
          <title>My page</title>
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width"
          />
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="preload"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
            as="font"
          />
        </Head>
        <StyledComponentProvider theme={theme}>
          <MaterialUiProvider theme={theme}>
            <StylesProvider injectFirst>
              <CssBaseline />
              <Component {...pageProps} />
            </StylesProvider>
          </MaterialUiProvider>
        </StyledComponentProvider>
      </>
    );
  }
Example #2
Source File: index.js    From rysolv with GNU Affero General Public License v3.0 6 votes vote down vote up 
export function App() {
  return (
    <Elements stripe={stripePromise}>
      <StylesProvider generateClassName={generateClassName} jss={jss}>
        <MuiThemeProvider theme={muiTheme}>
          <ViewSize>
            <Main />
            <GlobalStyles />
          </ViewSize>
        </MuiThemeProvider>
      </StylesProvider>
    </Elements>
  );
}
Example #3
Source File: Root.jsx    From jafar with MIT License 6 votes vote down vote up 
Root = () => {
  return ( 
    <HashRouter basename="/">
      <StylesProvider generateClassName={generateClassName}>
        <ThemeProvider theme={theme}>
          <Styled.GlobalStyle />
          <Styled.Header>
            <Styled.InternalLink id="logo" to="/">
              <Styled.Logo src={require('./jafar.svg')} />
              <Styled.LogoText>Jafar | React Editor</Styled.LogoText>
            </Styled.InternalLink>
            <Styled.HeaderLinks>
              <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink>
              <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink>
            </Styled.HeaderLinks>
          </Styled.Header>
          <Styled.Main id="jafar-react-editor-demos">
            <Switch>
              <Route exact={true} path="/" component={Home} />
              <Route exact={true} path="/form/:id" component={FormEdit} />
              <Route exact={true} path="/form/" component={FormList} />
              <Route exact={true} path="/field/:id" component={FieldEdit} />
              <Route exact={true} path="/field/" component={FieldList} />
            </Switch>
          </Styled.Main>
        </ThemeProvider>
      </StylesProvider>
    </HashRouter>
  );
}
Example #4
Source File: Root.jsx    From jafar with MIT License 6 votes vote down vote up 
Root = () => {
  useEffect(() => {
    const unsubscribeHashChange = window.addEventListener('hashchange', () => {
      window.parent.postMessage(location.hash, '*'); // eslint-disable-line
    });
    return () => unsubscribeHashChange && unsubscribeHashChange();
  }, []);

  return (<HashRouter basename="/">
    <StylesProvider generateClassName={generateClassName}>
      <Styled.RootElement id="jafar-react-form-demos">
        <Styled.GlobalStyle />
        <Styled.Header>
          <Styled.InternalLink id="logo" to={deafultDemoRoute}>
            <Styled.Logo src={require('./jafar.svg')} />
            <Styled.LogoText>Jafar | React Form Demos</Styled.LogoText>
          </Styled.InternalLink>
          <Styled.HeaderLinks>
            <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink>
            <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink>
          </Styled.HeaderLinks>
        </Styled.Header>
        <Route exact={true} path="/" render={shouldRedirect} />
        <Route 
          path="/:levelA/:levelB" 
          render={props => (<Styled.Wrapper id="demos"><Demos match={props.match} /></Styled.Wrapper>)} />
        {shouldRedirect()}
      </Styled.RootElement>
    </StylesProvider>
  </HashRouter>);
}
Example #5
Source File: Root.jsx    From jafar with MIT License 6 votes vote down vote up 
Root = () => {
  useEffect(() => {
    const unsubscribeHashChange = window.addEventListener('hashchange', () => {
      window.parent.postMessage(location.hash, '*'); // eslint-disable-line
    });
    return () => unsubscribeHashChange && unsubscribeHashChange();
  }, []);

  return (<HashRouter basename="/">
    <StylesProvider generateClassName={generateClassName}>
      <Styled.RootElement id="jafar-react-layout-demos">
        <Styled.GlobalStyle />
        <Styled.Header>
          <Styled.InternalLink id="logo" to={deafultDemoRoute}>
            <Styled.Logo src={require('./jafar.svg')} />
            <Styled.LogoText>Jafar | React Layout Demos</Styled.LogoText>
          </Styled.InternalLink>
          <Styled.HeaderLinks>
            <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink>
            <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink>
          </Styled.HeaderLinks>
        </Styled.Header>
        <Route exact={true} path="/" render={shouldRedirect} />
        <Route 
          path="/:levelA/:levelB" 
          render={props => (<Styled.Wrapper id="demos"><Demos match={props.match} /></Styled.Wrapper>)} />
        {shouldRedirect()}
      </Styled.RootElement>
    </StylesProvider>
  </HashRouter>);
}
Example #6
Source File: RTL.js    From DMS_React with GNU Affero General Public License v3.0 5 votes vote down vote up 
function RTL(props) {
  return (
    <StylesProvider jss={jss}>
      {props.children}
    </StylesProvider>
  );
}