如何在 Typescript 中的 emotion/styled 样式组件之间使用 props 共享样式

Question

我正在使用 emotion styled components。我有一个 textinput 和一个 input，我希望它们具有相同的样式。我在 .tsx 文件中执行此操作（也就是说，我正在编写打字稿）。

我认为它应该看起来像这样：

someView.tsx

import styled from "@emotion/styled";
import { css } from "@emotion/react";


const InputStyling = css`
 width: 100%;
  border-style: solid;
  border-color: ${(props: { invalid?: boolean }) => props.invalid ? red : blue};
`;

export const BaseInput = styled.input<{invalid?: boolean}>`
  ${InputStyling}
`;

export const BaseTextarea = styled.textarea<{invalid?: boolean}>`
  ${InputStyling}
`;

这不起作用，我在打字时收到以下错误：

➤ YN0000: src/design_system/TextInput/TextInput.tsx(19,22): error TS2769: No overload matches this call.
➤ YN0000:   Overload 1 of 2, '(template: TemplateStringsArray, ...args: CSSInterpolation[]): SerializedStyles', gave the following error.
➤ YN0000:     Argument of type '(props: {    invalid?: boolean;}) => string' is not assignable to parameter of type 'CSSInterpolation'.
➤ YN0000:       Type '(props: { invalid?: boolean | undefined; }) => string' is missing the following properties from type 'CSSInterpolation[]': pop, push, concat, join, and 25 more.
➤ YN0000:   Overload 2 of 2, '(...args: CSSInterpolation[]): SerializedStyles', gave the following error.
➤ YN0000:     Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'CSSInterpolation'.
➤ YN0000:       Type 'TemplateStringsArray' is missing the following properties from type 'CSSInterpolation[]': pop, push, reverse, shift, and 6 more.

我浏览了很多 Whosebug 答案，尝试了上面略有不同的咒语。例如，我试过 interface:

interface InputBoi {
  invalid?: boolean
}

export const BaseInput = styled.input<InputBoi>`
  ${resetInputCss}
  ${InputStyling}
`;

我遇到了同样的错误。

我尝试使用 styled 工厂函数样式：

export const BaseInput = styled('input')<InputBoi>`
  ${resetInputCss}
  ${InputStyling}
`;

export const BaseTextarea = styled('textarea')<{invalid?: boolean}>`
  ${resetInputCss}
  ${InputStyling}
`;

两者的错误相同。

Emotion's composition style isn't exactly what I want, 此应用的结构强烈建议避免 render 函数中的任何 CSS。

处理扩展其他组件，但这不是我想做的，我想分享css，没有一个组件扩展另一个（因为一个需要 input 而另一个需要 textarea）。

在情感库上，我找到了people with similar issues，但没有解决方案。

一个对我不起作用，我需要传递道具。

在 typescript 文件中使用 emotion/styled 样式组件时，在两个不同组件之间共享样式的正确方法是什么？

Answer 1

答案是使用returns一个styledcss模板字符串的函数，像这样：

const getInputStyling = ({ invalid } : { invalid: boolean | undefined}) => css`
  width: 100%;
  border-color: ${invalid ? 'red' : 'black'};
`;

export const BaseInput = styled.input<{invalid: boolean | undefined}>`
  ${({invalid}) => getInputStyling({ invalid })}
`;

如何在 Typescript 中的 emotion/styled 样式组件之间使用 props 共享样式

How to share styles, with props, between emotion/styled styled components, in Typescript

emotion

typescript

reactjs