styled-component 基本使用--在TypeStript中使用

ts 类型书写位置

export const FlexDiv = styled(Div)<{
  justify?: JustifyContentProps;
  items?: AlignItems;
  width?: string;
  height?: string;
  space?: string;
  nowrap?: boolean;
  flex?: number;
}>`
  display: flex;
  flex: ${props => props.flex};
  justify-content: ${props => props.justify};
  align-items: ${props => props.items};
  flex-wrap: ${props => (props.nowrap ? "nowrap" : "wrap")};
  width: ${props => props.width};
  height: ${props => props.height};
  & > * {
    margin-left: ${props => props.space};
    margin-right: ${props => props.space};
  }
`;

const Container = styled(Wrapper).attrs({ noShadow: true, row: false })<{
  hidden?: boolean;
  status?: boolean;
}>`
  background-color: transparent;
  backdrop-filter: blur(0.4rem);
  display: ${({ hidden }) => (hidden ? "none" : "flex")};
  align-items: flex-end;
  justify-content: flex-end;
  opacity: ${({ status }) => (status ? 1 : 0)};
  transition: opacity 0.2s linear;
`;

ts类型定义

<Button margin>submit</Button>

const Button = styled.button<{ margin?: boolean }>`
  background-color: #51f;
  color: #fff;
  border-radius: 0.25rem;
  border: none;
  height: 2rem;
  padding: 0.2rem 0.7rem;
  margin: ${props => (props.margin ? "0 0.5rem" : "none")};
`;

Create React Function Component

const Test = styled.div<{ color?: string; bgc?: string }>`
  color: ${props => props.color || "#FFF"};
  background-color: ${props => props.bgc || "#51f"};
`;

创建一个函数式的styled组件

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

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

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

const textShadow = css`
  /*text-shadow: h-shadow x-shadow blur color */
  text-shadow: 0px 0px 3px #000;
`;

interface SpanProps {
  theme?: any;
  shadow?: boolean;
  bold?: boolean;
  color?: string;
  className?: string;
  capitalize?: boolean;
  uppercase?: boolean;
  lowercase?: boolean;
}

const RFCSpan: React.FC<SpanProps> = (props) => (
  <span className={props.className}>{props.children}</span>
);

export const Span = styled(RFCSpan)`
  color: ${({ color }) => color || "black"};
  font-size: 1rem;
  font-weight: ${({ bold }) => (bold ? "bold" : undefined)};
  ${({ shadow }) => (shadow ? textShadow : undefined)}
  ${({ capitalize, uppercase }) =>
    capitalize ? Capitalize : uppercase ? Uppercase : Lowercase}
`;

使用

<Span bold color="#FFF" shadow capitalize>
 orange
</Span>

&使用

​​​&​​​ 向sass中&作用几乎一致，表示当前组件

实现这样一个场景： 鼠标移入div让div中的特定组件样式变化

const Text = styled.span``;

const Div = styled.div`
  width: 200px;
  height: 200px;
  background-color: #51f;

  &:hover ${Text} { // 鼠标移入DIV中时Text组件样式改变
    background-color: #faa;
  }
`;

// jsx
<Div>
 haha
  <Text>Text</Text>
</Div>

鼠标未移入：

鼠标移入：

为组件设置默认属性

** ​​defaultProps​​**

const Div = styled.div`
  color: ${(props: { textColor?: string }) => props.textColor};
`;

Div.defaultProps = {
  textColor: "#fff",
};

随机背景颜色容器

const randomColor = () =>
  `rgba(${Math.floor(Math.random() * 256)},${Math.floor(
    Math.random() * 256
  )},${Math.floor(Math.random() * 256)})`;

const Card = styled(ShadowView)`
  width: 200px;
  height: 200px;
  display: flex;
  background-color: ${() => randomColor()}; // 没渲染一次获得一个新的随机颜色
`

糟糕的尝试

以下是我的一次错误示范
在ts中使用styled-components各种类型检查，加上类型显得太长了，妄图写一个返回值的方法

type handlePrototypeProps = ({
  key,
  def,
}: {
  key: string;
  def: string;
}) => (props: { [any: string]: any }) => string;

const handlePrototype: handlePrototypeProps = ({ key, def }) => (props) =>
  props[key] ?? def;

使用

const ShadowView: StyledComponent<
  "div",
  any,
  { shadow?: string },
  never
> = styled.div`
  box-shadow: 0px 0px 10px 3px
    ${handlePrototype({ key: "shadow", def: "orange" })};

  :hover {
    box-shadow: "0px 0px 15px 5px "
      ${handlePrototype({ key: "shadow", def: "orange" })};
  }
`;

<ShadowView shadow="#000" />

需要手动添加第三个类型，以使jsx中标签属性不报类型错误，并且有代码提示

非常的麻烦，糟糕的尝试

---