@material-ui/styles#ThemeProvider TypeScript Examples

The following examples show how to use @material-ui/styles#ThemeProvider. 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.tsx    From Demae with MIT License 6 votes vote down vote up 
App = ({ Component, pageProps, router }: AppProps) => {
	return (
		<ThemeProvider theme={theme}>
			<CssBaseline />
			<Provider>
				<Router location={router.asPath}>
					<Component {...pageProps} />
				</Router >
			</Provider>
		</ThemeProvider>
	)
}
Example #2
Source File: index.test.tsx    From prism-frontend with MIT License 6 votes vote down vote up 
test('renders as expected', () => {
  const rendered = render(
    <Provider store={store}>
      <ThemeProvider theme={createMuiTheme()}>
        <AlertForm isOpen setOpen={jest.fn()} />
      </ThemeProvider>
    </Provider>,
  );
  return expect(rendered.container).toMatchSnapshot();
});
Example #3
Source File: index.stories.tsx    From react-planet with MIT License 6 votes vote down vote up 
withTheme = (component: any) => {
	return (
		<ThemeProvider theme={theme}>
			{/* Reboot kickstart an elegant, consistent, and simple baseline to build upon. */}
			<CssBaseline />
			{component}
		</ThemeProvider>
	);
}
Example #4
Source File: Login.tsx    From ra-enterprise-demo with MIT License 6 votes vote down vote up 
LoginWithTheme = (props: any): ReactElement => {
    const theme = useTheme();
    const { lightTheme } = getThemes(theme);
    return (
        <ThemeProvider theme={createMuiTheme(lightTheme)}>
            <Login {...props} />
        </ThemeProvider>
    );
}
Example #5
Source File: _app.tsx    From knests with MIT License 6 votes vote down vote up 
function MyApp(props) {
  const { Component, pageProps, apollo } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  if (process.browser) {
    const router = useRouter();
    if (!canVisit(router.pathname)) {
      router.push('/login');
    }
  }

  return (
    <ThemeProvider theme={theme}>
      <ApolloProvider client={apollo}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} client={apollo} />
      </ApolloProvider>
    </ThemeProvider>
  );
}
Example #6
Source File: EditorPanelWebview.tsx    From vscode-crossnote with GNU Affero General Public License v3.0 5 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={selectedTheme.muiTheme}>
    <CssBaseline></CssBaseline>
    <EditorPanel></EditorPanel>
  </ThemeProvider>,

  document.getElementById("root")
);
Example #7
Source File: NotesPanelWebview.tsx    From vscode-crossnote with GNU Affero General Public License v3.0 5 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={selectedTheme.muiTheme}>
    <CssBaseline></CssBaseline>
    <NotesPanel></NotesPanel>
  </ThemeProvider>,

  document.getElementById("root")
);
Example #8
Source File: index.tsx    From listo with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={theme}>
    {' '}
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);
Example #9
Source File: Login.tsx    From amplication with Apache License 2.0 4 votes vote down vote up 
Login = ({ theme }: { theme?: object }) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const login = useLogin();
  const notify = useNotify();
  const submit = (e: any) => {
    e.preventDefault();
    login({ username, password }).catch(() =>
      notify("Invalid email or password")
    );
  };

  return (
    <ThemeProvider theme={createTheme(defaultTheme)}>
      <div className={`${CLASS_NAME}`}>
        <div className={`${CLASS_NAME}__wrapper`}>
          <div className={`${CLASS_NAME}__box`}>
            <img
              src="https://amplication.com/assets/graphql.png"
              alt="GraphQL API"
            />
            <h2>Connect via GraphQL</h2>
            <div className={`${CLASS_NAME}__box__message`}>
              Connect to the server using GraphQL API with a complete and
              understandable description of the data in your API
            </div>
            <Button
              type="button"
              variant="contained"
              color="primary"
              href="/graphql"
            >
              Continue
            </Button>
          </div>
          <div className={`${CLASS_NAME}__box`}>
            <img
              src="https://amplication.com/assets/react-admin.png"
              alt="React-Admin"
            />
            <h2>Admin UI</h2>
            <div className={`${CLASS_NAME}__box__message`}>
              Sign in to a React-Admin client with ready-made forms for creating
              and editing all the data models of your application.
            </div>
            <form onSubmit={submit}>
              <label>
                <span>Username</span>

                <input
                  name="username"
                  type="textbox"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </label>
              <label>
                <span>password</span>

                <input
                  name="password"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </label>
              <Button type="submit" variant="contained" color="primary">
                Log in
              </Button>
            </form>
          </div>
          <div className={`${CLASS_NAME}__box`}>
            <img
              src="https://amplication.com/assets/restapi.png"
              alt="REST API"
            />
            <h2>Connect via REST API</h2>
            <div className={`${CLASS_NAME}__box__message`}>
              Connect to the server using REST API with a built-in Swagger
              documentation
            </div>
            <Button
              type="button"
              variant="contained"
              color="primary"
              href="/api"
            >
              Continue
            </Button>
          </div>

          <Notification />
        </div>
        <div className={`${CLASS_NAME}__read-more`}>
          <span>Read </span>
          <a href="https://docs.amplication.com/docs/api" target="docs">
            Amplication docs
          </a>
          <span> to learn more</span>
        </div>
      </div>
    </ThemeProvider>
  );
}