如何在 Typescript 中使用道具在情感/样式样式组件之间共享样式答案

【问题标题】：How to share styles, with props, between emotion/styled styled components, in Typescript如何在 Typescript 中使用道具在情感/样式样式组件之间共享样式
【发布时间】：2021-11-01 10:54:43
【问题描述】：

我正在使用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.

我浏览了许多 StackOverflow 的答案，尝试了上面略有不同的咒语。例如，我尝试使用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。

Other StackOverflow answers 处理扩展其他组件，但这不是我想做的，我想共享 css，而不是让一个组件扩展另一个组件（因为一个需要是 input 和另一个需要是textarea)。

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

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

在打字稿文件中使用情感/样式样式组件时，在两个不同组件之间共享样式的正确方法是什么？

【问题讨论】：

标签： reactjs typescript emotion

【解决方案1】：

答案是使用返回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 })}
`;

【讨论】：