问题描述
Fluent UI northstar 带有调色板。我可以在文档中找到 color names and gradients,但是我应该如何在 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;
,
有更通用的示例如何使用主题。在全局级别,您必须加载和提供主题。
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;