如何使用 Fluent UI Northstar 调色板？答案

【问题标题】：How to use the Fluent UI Northstar Color Palette?如何使用 Fluent UI Northstar 调色板？
【发布时间】：2021-05-12 14:16:54
【问题描述】：

Fluent UI Northstar 带有一个调色板。我可以在文档中找到color names and gradients，但是我应该如何在 TypeScript 中使用名称和渐变值（100、200 等）？我找不到任何文档或示例。

【问题讨论】：

标签： typescript colors fluentui-react

【解决方案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;

【讨论】：

感谢您的示例！你有更一般的参考吗？我正在尝试使用内置的 Northstar 主题，例如teamTheme，不一定要从头开始构建主题。 teamTheme.siteVariables 不会带我去任何地方。
你应该使用主题北极星正在从上下文中读取当前主题

【解决方案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;

【讨论】：

我一定还是遗漏了一些东西。我找到了 useCSS 导入，但是 siteVariables 只显示 fontSizes，而不是任何其他属性。接口 SiteVariablesPrepared 扩展 SiteVariablesInput {fontSizes: Record}
您是否正确导入主题并在组件三中提供此主题？
可能不是 :-) 我真的不知道从哪里开始。在您发布示例代码之前，我什至不知道 useCSS。您能否提供文档链接或 CodeSandbox 工作演示？
fluentsite.z22.web.core.windows.net/0.52.0/theming-examples