Styled-components常用代码片段

flex 类型

export type JustifyContentProps =
  | "center"
  | "space-between"
  | "flex-start"
  | "flex-end"
  | "space-around"
  | "space-evenly";
  
export type AlignItems = "center" | "flex-end" | "flex-start";

export interface IRoute {
  path: string;
  name?: string;
  exact?: boolean;
  Component: React.FunctionComponent;
}

export type FlexWrap =
  | "nowrap"
  | "wrap"
  | "wrap-reverse"
  | "initial"
  | "inherit";

定义flex div

type ColorType = "default" | "paper";

interface FlexDivProps {
  width?: string;
  height?: string;
  flex?: number;
  container?: any;
  color?: ColorType;
  theme?: Theme;
  justify?: JustifyContentProps;
  alignItems?: AlignItems;
  wrap?: FlexWrap;
}

export const flexDiv = styled.div`
  display: ${(props: FlexDivProps) => (props.container ? "flex" : undefined)};
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  flex: ${(props) => props.flex};
  background-color: ${(props) =>
    props.color ? props.theme.palette?.background?.[props.color] : undefined};
  justify-content: ${(props) => props.justify};
  align-items: ${(props) => props.alignItems};
  flex-wrap: ${(props) => props.wrap};
`;

export const ContentContainer = styled(flexDiv)((props) => ({
  width: "100%",
  height: "100%",
  position: "absolute",
  color: props.theme.palette.text.primary,
}));

常用 styled-componens片段

export const Capitalize = css`
  text-transform: capitalize;
`;

export const Uppercase = css`
  text-transform: uppercase;
`;

export const Lowercase = css`
  text-transform: lowercase;
`;

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const BetweenCenter = css`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;


export const Span = styled.span`
  color: ${(props) => props.theme.palette.text.primary};
`;

export const P = styled.p`
  color: ${(props) => props.theme.palette.text.primary};
`;

materaile-ui theme

export const themeBackground = css`
  background-color: ${(props) =>
    props.theme.palette.background.default} !important;
`;

export const themeSecondBackground = css`
  background-color: ${(props) =>
    props.theme.palette.background.paper} !important;
`;

export const themePrimaryBackground = css`
  background-color: ${(props) => props.theme.palette.text.primary} !important;
`;
export const themeBackground_second = css`
  background-color: ${(props) =>
    props.theme.palette.background.level1} !important;
`;

export const themeFontColor = css`
  color: ${(props) => props.theme.palette.text.primary} !important;
`;