@material-ui/core/styles ThemeProvider TypeScript Examples

Source File: HomepageTimer.test.tsx From backstage with Apache License 2.0

6 votes

it('changes default timezone to GMT', async () => {
  const configApi: ConfigApi = new ConfigReader({
    homepage: {
      clocks: [
        {
          label: 'New York',
          timezone: 'America/New_Pork',
        },
      ],
    },
    context: 'test',
  });

  const rendered = await renderWithEffects(
    <ThemeProvider theme={lightTheme}>
      <TestApiProvider apis={[[configApiRef, configApi]]}>
        <HomepageTimer />
      </TestApiProvider>
    </ThemeProvider>,
  );

  expect(rendered.getByText('GMT')).toBeInTheDocument();
});

Source File: App.tsx From ow-mod-manager with MIT License

6 votes

App = () => (
  <ErrorBoundary>
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <ErrorBoundary>
          <SettingsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <LocalModsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <RemoteModsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <LogsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <MainView />
        </ErrorBoundary>
      </ThemeProvider>
    </RecoilRoot>
  </ErrorBoundary>
)

Source File: _app.tsx From Figurify with Apache License 2.0

6 votes

function MyApp({Component, pageProps}) {
    return <>
        <Head>
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
            <title>{NAME}</title>
        </Head>
        <ThemeProvider theme={theme}>
            <Component {...pageProps} />
        </ThemeProvider>
    </>;
}

Source File: _app.tsx From Teyvat.moe with GNU General Public License v3.0

6 votes

_app: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
  // TODO: Remove server-side JSS styles.
  // Normally you'd call 'useEffect' to call jssStyles.parentElement.removeChild(jssStyles);
  // However, I was experiencing an unknown bug where the old class names weren't being replaced
  // with the new ones, so I just got rid of the call so that the old class names would work.

  return (
    <>
      {/* StoreProvider allows hooks and components to access the Redux store. */}
      <StoreProvider store={store}>
        {/* ThemeProvider allows for child components to access the Material UI theme. */}
        <ThemeProvider theme={Theme}>
          {/* CSSBaseline injects a basic cascading style sheet for use by Material UI styling. */}
          <CssBaseline />
          {/* NotificationProvider handles the Notistack.
              Must be a child of StoreProvider since Redux handles notifications. */}
          <StylesProvider generateClassName={generateClassName}>
            <NotificationProvider>
              {/* ErrorHandler provides a fallback interface to use if the web page crashes. */}
              <ErrorHandler errorHandler={FullPageErrorHandler}>
                {/* Component provides the actual map content. */}
                <Component {...pageProps} />
              </ErrorHandler>
            </NotificationProvider>
          </StylesProvider>
        </ThemeProvider>
      </StoreProvider>
    </>
  );
}

Source File: index.tsx From prism-frontend with MIT License

6 votes

function App() {
  const isAuthenticated = useIsAuthenticated();

  const authRequired: boolean = get(appConfig, 'WFPAuthRequired', false);

  return (
    <ThemeProvider theme={muiTheme}>
      {/* Used to show notifications from redux as a snackbar. Notifications are stored in notificationState */}
      <Notifier />
      <Router>
        {isAuthenticated || !authRequired ? <Wrapper /> : <Login />}
      </Router>
    </ThemeProvider>
  );
}

Source File: App.tsx From BlinkWebUI with GNU General Public License v3.0

6 votes

render(): JSX.Element {
        return (
            <>
                <CssBaseline />
                <ThemeProvider theme={theme}>
                    <I18nextProvider i18n={i18n}>
                        <Router>
                            <MainLayout />
                        </Router>
                    </I18nextProvider>
                </ThemeProvider>
            </>
        );
    }

Source File: index.tsx From react-app-architecture with Apache License 2.0

6 votes

Routes = (): ReactElement => {
  // remove the css sent inline in the html on client side
  // useEffect in similar to componentDidMount for function components
  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles && jssStyles.parentNode) jssStyles.parentNode.removeChild(jssStyles);
  }, []);

  return (
    <Provider store={store}>
      <CookiesProvider>
        <BrowserRouter>
          <ThemeProvider theme={theme}>
            <Route component={App} />
          </ThemeProvider>
        </BrowserRouter>
      </CookiesProvider>
    </Provider>
  );
}

Source File: index.tsx From vscode-crossnote with GNU Affero General Public License v3.0

6 votes

ABCWidgetCreator: WidgetCreator = (args) => {
  const el = document.createElement("span");
  ReactDOM.render(
    <ThemeProvider theme={selectedTheme.muiTheme}>
      <ABCWidget {...args}></ABCWidget>
    </ThemeProvider>,
    el
  );
  return el;
}

Source File: test-utils.tsx From dashboard with Apache License 2.0

6 votes

AllTheProviders: FC = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <Provider store={store}>{children}</Provider>
    </ThemeProvider>
  )
}

Source File: themes.tsx From backstage with Apache License 2.0

6 votes

themes: AppTheme[] = [
  {
    id: 'light',
    title: 'Light Theme',
    variant: 'light',
    icon: <LightIcon />,
    Provider: ({ children }) => (
      <ThemeProvider theme={lightTheme}>
        <CssBaseline>{children}</CssBaseline>
      </ThemeProvider>
    ),
  },
  {
    id: 'dark',
    title: 'Dark Theme',
    variant: 'dark',
    icon: <DarkIcon />,
    Provider: ({ children }) => (
      <ThemeProvider theme={darkTheme}>
        <CssBaseline>{children}</CssBaseline>
      </ThemeProvider>
    ),
  },
]

Source File: index.tsx From twitch-live-extension with BSD 3-Clause "New" or "Revised" License

6 votes

ReactDOM.render(
    <Provider store={store}>
        <ThemeProvider theme={darkTheme}>
            <Paper square>
                <Router>
                    <Switch>
                        <Route path="/settings" component={SettingsPage} />
                        <Route component={App} />
                    </Switch>
                </Router>
            </Paper>
        </ThemeProvider>
    </Provider>,
    document.getElementById('root'),
);

Source File: Page.tsx From backstage with Apache License 2.0

6 votes

export function Page(props: Props) {
  const { themeId, children } = props;
  const { isMobile } = useSidebarPinState();
  const classes = useStyles({ isMobile });
  return (
    <ThemeProvider
      theme={(baseTheme: BackstageTheme) => ({
        ...baseTheme,
        page: baseTheme.getPageTheme({ themeId }),
      })}
    >
      <main className={classes.root}>{children}</main>
    </ThemeProvider>
  );
}

Source File: App.tsx From planning-poker with MIT License

6 votes

function App() {
  return (
    <div className="LightTheme">
    <ThemeProvider theme={theme} >
      <StylesProvider injectFirst>
        <CssBaseline />
        <Router>
          <Toolbar />
          <Switch>
            <Route path='/game/:id' component={GamePage} />
            <Route path='/join/:id' component={HomePage} />
            <Route exact path='/*' component={HomePage} />
          </Switch>
        </Router>
      </StylesProvider>
    </ThemeProvider>
    </div>
  );
}

Source File: DefaultResultListItem.stories.tsx From backstage with Apache License 2.0

6 votes

WithCustomHighlightedResults = () => {
  const customTheme = {
    ...lightTheme,
    overrides: {
      ...lightTheme.overrides,
      BackstageHighlightedSearchResultText: {
        highlight: {
          color: 'inherit',
          backgroundColor: 'inherit',
          fontWeight: 'bold',
          textDecoration: 'underline',
        },
      },
    },
  };

  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline>
        <DefaultResultListItem
          result={mockSearchResult}
          highlight={{
            preTag: '<tag>',
            postTag: '</tag>',
            fields: { text: 'some <tag>text</tag> from the search result' },
          }}
        />
      </CssBaseline>
    </ThemeProvider>
  );
}

Source File: App.tsx From gateway-ui with BSD 3-Clause "New" or "Revised" License

6 votes

function App(): ReactElement {
  return (
    <ThemeProvider theme={theme}>
      <Provider>
        <>
          <CssBaseline />
          <Routes />
        </>
      </Provider>
    </ThemeProvider>
  )
}

Source File: app.tsx From webminidisc with GNU General Public License v2.0

6 votes

App = () => {
    const classes = useStyles();
    const { mainView, loading, darkMode, vintageMode } = useShallowEqualSelector(state => state.appState);

    if (vintageMode) {
        return <W95App></W95App>;
    }

    return (
        <React.Fragment>
            <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
                <CssBaseline />

                <main className={classes.layout}>
                    <Paper className={classes.paper}>
                        {mainView === 'WELCOME' ? <Welcome /> : null}
                        {mainView === 'MAIN' ? <Main /> : null}

                        <Box className={classes.controlsContainer}>{mainView === 'MAIN' ? <Controls /> : null}</Box>
                    </Paper>
                    <Typography variant="body2" color="textSecondary" className={classes.copyrightTypography}>
                        {'© '}
                        <Link rel="noopener noreferrer" color="inherit" target="_blank" href="https://stefano.brilli.me/">
                            Stefano Brilli
                        </Link>{' '}
                        {new Date().getFullYear()}
                        {'.'}
                    </Typography>
                </main>

                {loading ? (
                    <Backdrop className={classes.backdrop} open={loading}>
                        <CircularProgress color="inherit" />
                    </Backdrop>
                ) : null}
            </ThemeProvider>
        </React.Fragment>
    );
}

Source File: App.tsx From bee-dashboard with BSD 3-Clause "New" or "Revised" License

6 votes

App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
  <div className="App">
    <ThemeProvider theme={theme}>
      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
        <BeeProvider>
          <StampsProvider>
            <FileProvider>
              <FeedsProvider>
                <PlatformProvider>
                  <TopUpProvider>
                    <SnackbarProvider>
                      <Router>
                        <>
                          <CssBaseline />
                          <Dashboard>
                            <BaseRouter />
                          </Dashboard>
                        </>
                      </Router>
                    </SnackbarProvider>
                  </TopUpProvider>
                </PlatformProvider>
              </FeedsProvider>
            </FileProvider>
          </StampsProvider>
        </BeeProvider>
      </SettingsProvider>
    </ThemeProvider>
  </div>
)

Source File: index.tsx From logo-generator with MIT License

6 votes

// import { AuthProvider } from './context/AuthContext';

ReactDOM.render(
	<ThemeProvider theme={theme}>
		{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
		<>
			<CssBaseline />
			<App />
		</>
	</ThemeProvider>
	,
	document.querySelector('#root'),
);

Source File: index.tsx From akashlytics with GNU General Public License v3.0

6 votes

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <QueryClientProvider client={queryClient}>
        <IntlProvider locale={navigator.language}>
          <HelmetProvider>
            <SnackbarProvider maxSnack={3} dense hideIconVariant>
              <MediaQueryProvider>
                <Router>
                  <ScrollToTop />
                  <App />
                </Router>
              </MediaQueryProvider>
            </SnackbarProvider>
          </HelmetProvider>
        </IntlProvider>
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Source File: index.tsx From vscode-crossnote with GNU Affero General Public License v3.0

6 votes

AudioWidgetCreator: WidgetCreator = (args) => {
  const el = document.createElement("span");
  ReactDOM.render(
    <ThemeProvider theme={selectedTheme.muiTheme}>
      <AudioWidget {...args}></AudioWidget>
    </ThemeProvider>,
    el
  );
  return el;
}

Source File: App.tsx From Pi-Tool with GNU General Public License v3.0

6 votes

function App() {
    return (
        <div className="App" style={{ width: '100%', height: '100%' }}>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Container maxWidth="md">
                    <OverclockingCard />
                    <MonitoringCard />
                    <ButtonMappingCard />
                    <CMLogo />
                </Container>
            </ThemeProvider>
        </div>
    );
}

Source File: NotionFilter.tsx From Nishan with MIT License

6 votes

function NotionFilter(props: Props) {
  const default_group_operator = props.default_group_operator ?? "and";
  const [filters, dispatch] = useReducer(notionFilterReducer, props.filters ?? {
    filters: [],
    operator: default_group_operator
  })

  return <NotionFilterContext.Provider value={{ filter_item_label: props.filter_item_label ?? false, default_group_operator, filters, dispatch, schema: props.schema, nestingLevel: props.nestingLevel ?? 5 }}>
    <ThemeProvider theme={theme}>
      <div className="NotionFilter" style={{ fontFamily: "Segoe UI" }}>
        <FilterGroup parent_filter={null} filter={filters} trails={[]} />
      </div>
    </ThemeProvider>
  </NotionFilterContext.Provider>
}

Source File: App.tsx From sphinx-win-linux-desktop with MIT License

6 votes

function Wrap(){
  const {ui} = useStores()
  return useObserver(()=>{
    if(ui.ready) return <ThemeProvider theme={ createMuiTheme({palette}) }><App /></ThemeProvider>
    return <Loading>
      <CircularProgress style={{color:'white'}} />
    </Loading>
  })
}

Source File: radio_input.tsx From jupyter-extensions with Apache License 2.0

6 votes

/** Funtional Component for Radio input fields */
export function RadioInput(props: RadioInputProps) {
  const { options, ...groupProps } = props;
  return (
    <ThemeProvider theme={theme}>
      <RadioGroup {...groupProps}>
        {options &&
          options.map((o, i) => (
            <FormControlLabel
              key={i}
              value={o.value}
              control={<Radio />}
              label={o.text}
              className={css.primaryTextColor}
            />
          ))}
      </RadioGroup>
    </ThemeProvider>
  );
}

Source File: index.unit.spec.tsx From next-typescript-materialui-jest-starter with MIT License

6 votes

describe("Button Unit Tests", () => {
  afterEach(() => {
    sandbox.verifyAndRestore();
    cleanup();
  });

  it("should render", () => {
    // Arrange
    sandbox.spy(React, "createElement");

    // Act
    const { container } = render(
      <ThemeProvider theme={theme}>
        <Button color="primary" name={word()} />
      </ThemeProvider>
    );

    // Assert
    expect(container.querySelector("button")).toBeInTheDocument();
    expect((React.createElement as SinonStub).calledWith(MuiButton)).toBe(true);
  });
});

Source File: pageBuilder.tsx From react-app-architecture with Apache License 2.0

5 votes

export default function pageBuilder(
  req: PublicRequest,
  pageinfo: PageInfo = {
    title: 'AfterAcademy | React Project',
    description: 'This is the sample project to learn and implement React app.',
  },
  currentState: Partial<RootState> = {},
): string {
  // create mui server style
  const sheets = new ServerStyleSheets();

  const authData = req.universalCookies.get(KEY_AUTH_DATA);
  if (authData?.tokens?.accessToken) {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { tokens, ...data } = authData;
    currentState.authState = {
      data: data, // security
      isLoggingIn: false,
      isLoggingOut: false,
      isLoggedIn: true,
      isForcedLogout: false,
      isRedirectHome: false,
      message: null,
    };
  }

  const store = isDev
    ? configureStore(currentState)
    : createStore(rootReducer, currentState, applyMiddleware(thunk));

  // Render the component to a string
  const html = renderToString(
    sheets.collect(
      <Provider store={store}>
        <CookiesProvider cookies={req.universalCookies}>
          <StaticRouter location={req.url} context={{}}>
            <ThemeProvider theme={theme}>
              <App />
            </ThemeProvider>
          </StaticRouter>
        </CookiesProvider>
      </Provider>,
    ),
  );

  // Grab the CSS from our sheets.
  const css = sheets.toString();

  const baseUrl = `${getProtocol(req)}://${req.get('host')}`;
  const siteUrl = baseUrl + req.originalUrl;

  const { coverImg, title, description } = pageinfo;

  let htmlPage = render({
    html: html,
    css: css,
    preloadedState: store.getState(),
    siteUrl: siteUrl,
    title: title,
    coverImg: coverImg ? coverImg : `${baseUrl}/assets/og-cover-image.jpg`,
    description: description,
  });

  try {
    htmlPage = minifyHtml(htmlPage, {
      minifyCSS: true,
      minifyJS: true,
    });
  } catch (e) {
    console.log(e);
  }

  return htmlPage;
}

Source File: MuiDecorator.tsx From log4brains with Apache License 2.0

5 votes

export function MuiDecorator({ children }: Props) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

Source File: index.tsx From swap-ui with Apache License 2.0

5 votes

/**
 * A`Swap` component that can be embedded into applications. To use,
 * one can, minimally, provide a provider and token list to the component.
 * For example,
 *
 * ```javascript
 * <Swap provider={provider} tokenList={tokenList} />
 * ```
 *
 * All of the complexity of communicating with the Serum DEX and managing
 * its data is handled internally by the component.
 *
 * For information on other properties like earning referrals, see the
 * [[SwapProps]] documentation.
 */
export default function Swap(props: SwapProps): ReactElement {
  const {
    containerStyle,
    contentStyle,
    swapTokenContainerStyle,
    materialTheme,
    provider,
    tokenList,
    fromMint,
    toMint,
    fromAmount,
    toAmount,
    referral,
  } = props;

  // @ts-ignore
  const swapClient = new SwapClient(provider, tokenList);
  const theme = createMuiTheme(
    materialTheme || {
      palette: {
        primary: {
          main: "#2196F3",
          contrastText: "#FFFFFF",
        },
        secondary: {
          main: "#E0E0E0",
          light: "#595959",
        },
        error: {
          main: "#ff6b6b",
        },
      },
    }
  );
  return (
    <ThemeProvider theme={theme}>
      <TokenListContextProvider tokenList={tokenList}>
        <TokenContextProvider provider={provider}>
          <DexContextProvider swapClient={swapClient}>
            <SwapContextProvider
              fromMint={fromMint}
              toMint={toMint}
              fromAmount={fromAmount}
              toAmount={toAmount}
              referral={referral}
            >
              <SwapCard
                containerStyle={containerStyle}
                contentStyle={contentStyle}
                swapTokenContainerStyle={swapTokenContainerStyle}
              />
            </SwapContextProvider>
          </DexContextProvider>
        </TokenContextProvider>
      </TokenListContextProvider>
    </ThemeProvider>
  );
}

Source File: App.tsx From shadowsocks-electron with GNU General Public License v3.0

5 votes

App: React.FC = () => {
  const styles = useStyles();
  const darkMode = persistStore.get('darkMode') === 'true';
  const [theme] = useTheme(darkMode ? 'dark' : 'light');

  useEffect(() => {
    getConnectionStatus((status) => {
      store.dispatch({
        type: SET_STATUS,
        key: "connected",
        value: status
      });
    });

    MessageChannel.invoke('main', 'service:desktop', {
      action: 'setLocale',
      params: getFirstLanguage(persistStore.get('lang') as string)
    });
  }, []);

  return (
    <Provider store={store}>
      <PersistGate loading={<Loading />} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <SnackbarProvider
            maxSnack={3}
            anchorOrigin={ {horizontal: 'center', vertical: 'top'} }
            autoHideDuration={2e3}
          >
            <HashRouter>
              <div className={styles.root}>
                <CssBaseline />
                <AppNav />
                <main className={styles.content}>
                  <div className={styles.toolbar} />
                  <RouterComp />
                </main>
              </div>
            </HashRouter>
          </SnackbarProvider>
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
}

@material-ui/core/styles#ThemeProvider TypeScript Examples