Typescript 如何使用Fluent UI Northstar调色板？

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

您好，下面是标题组件的示例：

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;

const头：React.FC=（）=>{
const styledHeaderRapper=useCSS（（主题）=>({
gridColumn：“跨度4”，
backgroundColor:theme.siteVariables.colorScheme.brand.background1，
}));
返回(
);
};
导出默认标题；

您好，下面是标题组件的示例：

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;

const头：React.FC=（）=>{
const styledHeaderRapper=useCSS（（主题）=>({
gridColumn：“跨度4”，
backgroundColor:theme.siteVariables.colorScheme.brand.background1，
}));
返回(
);
};
导出默认标题；

关于如何使用主题，还有更通用的示例。在全局级别上，您必须加载并提供主题

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;

从“@fluentui/react northstar”导入{Provider，teamsTime}；
从“@fluentui/react northstar”导入{Grid}”；
常量布局：React.FC=（{children}）=>{
返回(
{儿童}
);
};
导出默认布局；

然后按组成部分：

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;

const头：React.FC=（{children}）=>{
const styledHeaderRapper=useCSS（（主题）=>({
gridColumn：“跨度4”，
背景颜色：theme.siteVariables.colorScheme.brand.white，
}));
返回(
{儿童}
);
};
导出默认标题；

关于如何使用主题，还有更通用的示例。在全局级别上，您必须加载并提供主题

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;

从“@fluentui/react northstar”导入{Provider，teamsTime}；
从“@fluentui/react northstar”导入{Grid}”；
常量布局：React.FC=（{children}）=>{
返回(
{儿童}
);
};
导出默认布局；

然后按组成部分：

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;

const头：React.FC=（{children}）=>{
const styledHeaderRapper=useCSS（（主题）=>({
gridColumn：“跨度4”，
背景颜色：theme.siteVariables.colorScheme.brand.white，
}));
返回(
{儿童}
);
};
导出默认标题；

谢谢您的示例！你有更一般的参考资料吗？我正在尝试使用内置的北极星主题，例如TeamsTime，而不一定从头开始构建主题。teamsTheme.siteVariables不会把我带到任何地方。你应该使用主题northstar正在从上下文读取当前主题谢谢你的示例！你有更一般的参考资料吗？我正在尝试使用内置的北极星主题，例如TeamsTime，而不一定从头开始构建主题。teamsTheme.siteVariables不会带我去任何地方。你应该使用主题northstar正在从contextI读取当前主题我一定仍然缺少一些东西。我发现了useCSS导入，但是siteVariables只显示fontSizes，而不显示任何其他属性。接口SiteVariablesPrepared扩展SiteVariablesInput{fontSizes:Record}您是否正确导入主题并在组件3中提供此主题？可能不是：-），我真的不知道从哪里开始。在您发布示例代码之前，我甚至不知道useCSS。你会有一个文档的链接，或者是一个CodeSandbox的工作演示吗？我肯定还是遗漏了一些东西。我发现了useCSS导入，但是siteVariables只显示fontSizes，而不显示任何其他属性。接口SiteVariablesPrepared扩展SiteVariablesInput{fontSizes:Record}您是否正确导入主题并在组件3中提供此主题？可能不是：-），我真的不知道从哪里开始。在您发布示例代码之前，我甚至不知道useCSS。您是否有文档的链接，或者是CodeSandbox工作演示？