本文整理汇总了TypeScript中styled-tools.theme函数的典型用法代码示例。如果您正苦于以下问题：TypeScript theme函数的具体用法？TypeScript theme怎么用？TypeScript theme使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了theme函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import Box from "../Box";
const Avatar = styled(Box)`
${theme("Avatar")};
`;
export default as("img")(Avatar);
示例2: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import Box from "../Box";
const Heading = styled(Box)`
${theme("Heading")};
`;
export default as("h1")(Heading);
示例3: styled
column?: boolean;
rowReverse?: boolean;
columnReverse?: boolean;
nowrap?: boolean;
wrap?: boolean;
wrapReverse?: boolean;
}
const Flex = styled(Box)<FlexProps>`
display: flex;
&&& {
${bool("flex-direction", directions)};
${bool("flex-wrap", wraps)};
}
${theme("Flex")};
`;
// @ts-ignore
Flex.propTypes = {
row: PropTypes.bool,
column: PropTypes.bool,
rowReverse: PropTypes.bool,
columnReverse: PropTypes.bool,
nowrap: PropTypes.bool,
wrap: PropTypes.bool,
wrapReverse: PropTypes.bool
};
export default as("div")(Flex);
示例4: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import Box from "../Box";
const Field = styled(Box)`
${theme("Field")};
`;
export default as("div")(Field);
示例5: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import Box from "../Box";
const Input = styled(Box)`
${theme("Input")};
`;
Input.defaultProps = {
type: "text",
opaque: true,
palette: "white"
};
export default as("input")(Input);
示例6: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import HiddenShow from "../Hidden/HiddenShow";
const OverlayShow = styled(HiddenShow)`
${theme("OverlayShow")};
`;
export default as("button")(OverlayShow);
示例7: styled
autoRows?: string | number;
}
const Grid = styled(Box)<GridProps>`
display: grid;
&&& {
${bool("grid-auto-flow", ["row", "column", "dense"])}
${value("grid-gap", "gap")}
${value("grid-template", "template")}
${value("grid-template-areas", "areas")}
${value("grid-template-columns", "columns")}
${value("grid-template-rows", "rows")}
${value("grid-auto-columns", "autoColumns")}
${value("grid-auto-rows", "autoRows")}
}
${theme("Grid")};
`;
const valueType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
// @ts-ignore
Grid.propTypes = {
row: PropTypes.bool,
column: PropTypes.bool,
dense: PropTypes.bool,
gap: valueType,
template: valueType,
areas: valueType,
columns: valueType,
rows: valueType,
autoColumns: valueType,示例8: styled
columnEnd?: string | number;
rowStart?: string | number;
rowEnd?: string | number;
}
const GridItem = styled(Box)<GridItemProps>`
&&& {
${value("grid-area", "area")};
${value("grid-column", "column")};
${value("grid-row", "row")};
${value("grid-column-start", "columnStart")};
${value("grid-column-end", "columnEnd")};
${value("grid-row-start", "rowStart")};
${value("grid-row-end", "rowEnd")};
}
${theme("GridItem")};
`;
const valueType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
// @ts-ignore
GridItem.propTypes = {
area: valueType,
column: valueType,
row: valueType,
columnStart: valueType,
columnEnd: valueType,
rowStart: valueType,
rowEnd: valueType
};
示例9: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import Box from "../Box";
const List = styled(Box)`
${theme("List")};
`;
export default as("ul")(List);
示例10: styled
import { theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import PopoverArrow from "../Popover/PopoverArrow";
const TooltipArrow = styled(PopoverArrow)`
${theme("TooltipArrow")};
`;
TooltipArrow.defaultProps = {
palette: "grayscale"
};
export default as("div")(TooltipArrow);