Как использовать цветовую палитру Northstar в Fluent UI?

Question

Fluent UI Northstar имеет цветовую палитру. Я могу найти названия цветов и градиенты в документации, но как я должен использовать имена и значения градиента (100, 200 и т. Д.) В TypeScript? Я не нашел ни документации, ни примеров.

Answer 1

Привет ниже У вас есть пример компонента заголовка:

      const Header: React.FC<SegmentProps> = () => {
  const styledHeaderWrapper = useCSS((theme) => ({
    gridColumn: "span 4",
    backgroundColor: theme.siteVariables.colorScheme.brand.background1,
  }));

  return (
    <Flex
      gap="gap.small"
      hAlign="center"
      vAlign="center"
      className={styledHeaderWrapper}
    >
      <Image src="LOGO.svg" />
      <Breadcrumb content="main/site1" />
      <div style={{ width: "100%" }}>
        <Input
          icon={<SearchIcon />}
          placeholder="Search..."
          iconPosition="start"
          fluid
          style={{ padding: "0 25%" }}
        />
      </div>
      <HeaderNavigationBar />
    </Flex>
  );
};

export default Header;

Answer 2

Есть более общий пример использования темы. На глобальном уровне вы должны загрузить и предоставить тему.

      import { Provider, teamsTheme } from "@fluentui/react-northstar";
import { Grid } from "@fluentui/react-northstar";

const Layout: React.FC = ({ children }) => {
  return (
    <Provider theme={teamsTheme}>
      <Grid
        columns="minmax(50px, 0.75fr) 1fr 1fr 1fr"
        rows="50px 1fr"
        style={{ height: "100vh" }}
      >
        {children}
      </Grid>
    </Provider>
  );
};

export default Layout;

Затем по компонентам:

      const Header: React.FC<SegmentProps> = ({children}) => {
  const styledHeaderWrapper = useCSS((theme) => ({
    gridColumn: "span 4",
    backgroundColor: theme.siteVariables.colorScheme.brand.white,
  }));
return (
    <Flex
      gap="gap.small"
      hAlign="center"
      vAlign="center"
      className={styledHeaderWrapper}
    >
      {children}
    </Flex>
  );
};

export default Header;