Package Exports

czifui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (czifui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Components

2021 Create-a-thon Science Initiative Component Library

Teams

Get Started

Peer dependencies

In order to avoid installing multiple versions of the same library in the host project, which could cause bugs, the component library does not have its own dependencies.

Therefore, please kindly ensure your project includes the following dependencies in your package.json:

  "@emotion/react"
  "@emotion/styled"
  "@material-ui/core"
  "react"
  "react-dom"

Default Theme

Instructions

To use the default theme, please do the following:

Add the following HTML to your index.html at the <head> section:

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
  rel="stylesheet"
/>

Import the default theme object and use it in Material UI's <ThemeProvider />:

  import { defaultTheme } from '@chanzuckerberg/sci-components/core/styles`
  import { ThemeProvider } from "@material-ui/core/styles";

  <ThemeProvider theme={defaultTheme}>
    <YourApp />
  </ThemeProvider>

Optional: If you want to override the default theme, please use defaultThemeOptions, override the options, and then call createMuiTheme to generate the full theme object like below. This is needed because createMuiTheme generates extra theme variables based on the themeOptions provided, so if you override defaultTheme directly, some auxillary theme variables will be based on defaultThemeOptions instead of your own custom options

  import { defaultThemeOptions } from '@chanzuckerberg/sci-components/core/styles`
  import { ThemeProvider } from "@material-ui/core/styles";
  import createMuiTheme from "@material-ui/core/styles/createMuiTheme";

  const customTheme = {
    ...
  }

  const theme = createMuiTheme({ ...defaultThemeOptions, ...customTheme })

    <ThemeProvider theme={theme}>
      <YourApp />
    </ThemeProvider>