We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hello, all
I want to ask my spacing type with design system doesn't work with styled system
I've components Box you can see in here
const space = { /** Equal to 2px */ xxxs: 2, /** Equal to 4px */ xxs: 4, /** Equal to 8px */ xs: 8, /** Equal to 12px */ sm: 12, /** Equal to 16px */ md: 16, /** Equal to 24px */ lg: 24, /** Equal to 32px */ xl: 32, /** Equal to 48px */ xxl: 48, }; export type Space = typeof space; export default space; export const theme = { ...space }
Components
import React from "react"; import CSS from "csstype"; import { theme } from "libs/space"; import { Box, BoxProps } from "layout/Box"; type Space = keyof typeof theme["space"]; export interface StackProps extends Omit<BoxProps, "color"> { id: string; className: string; style: React.CSSProperties; color: string; direction: "horizontal" | "vertical"; spacing: Space | CSS.Property.Margin; // indicate "sm" | "xs" | "lg" | "xxs"| etc children: React.ReactNode; } const Stack = React.forwardRef<HTMLDivElement, Partial<StackProps>>( ({ children, spacing, direction = "vertical", ...rest }, ref) => { const validChildrenArray = React.Children.toArray(children).filter(React.isValidElement); return ( <Box ref={ref} sx={{ display: "flex", flexDirection: direction === "horizontal" ? "row" : "column", "> :not([hidden]) ~ :not([hidden])": { ...(direction === "horizontal" ? { ml: spacing } : { mt: spacing }), }, }} {...rest} > {validChildrenArray.map((child, i) => { if (typeof child === "string" || child.type === React.Fragment) { /* eslint-disable react/no-array-index-key */ return <Box key={`stack-child-${i}`}>{child}</Box>; } return React.cloneElement(child); })} </Box> ); } ); Stack.displayName = "Stack"; export default Stack;
When using it. It doesn't generate with what i want for ex if i use
<Stack spacing="lg" direction="vertical" />
then it would be on browser :
Please help me.
The text was updated successfully, but these errors were encountered:
i couldnt find the styled system usage on your code but here is an example for you sandbox: https://codesandbox.io/s/agitated-sea-j2kxzv
const spacing = [0, 4, 8, 16, 32, 64, 128, 256]; spacing.xss = spacing[2]; spacing.xs = spacing[1]; spacing.md = spacing[2]; spacing.lg = spacing[3]; spacing.xl = spacing[4]; spacing.xxl = spacing[5]; const theme = { fontSizes: [12, 14, 16, 24, 32, 48, 64, 96, 128], space: spacing, colors: { blue: "#07c", red: "#e10" } }; const Box = styled.div` ${space} ${width} ${fontSize} ${color} `;
Sorry, something went wrong.
Thanks
No branches or pull requests
Hello, all
I want to ask my spacing type with design system doesn't work with styled system
I've components Box you can see in here
Components
When using it. It doesn't generate with what i want for ex if i use
then it would be on browser :
Please help me.
The text was updated successfully, but these errors were encountered: