Javascript 样式化组件类型脚本

使用

样式化组件

，使用normal React.js，我可以执行以下操作：

const Container = styled.div({
  userSelect: `none !important`,
})

但是，使用TypeScript时，我会出现以下错误：

Argument of type '{ userSelect: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
  Object literal may only specify known properties, and 'userSelect' does not exist in type 'TemplateStringsArray'.ts(2345)

解决这个问题的最好方法是什么

我不想使用

styled.div

模板字符串方法，因为我发现它灵活性差得多

例如，对于模板字符串，我们不能执行以下操作：

const flex = {
  flex: display: flex,
  col: flexDirection: `column`
}

const FlexRow = styled.div({
  ...flex.flex,
})

const FlexCol = styled.div({
   ...flex.flex,
   ...flex.col,
})

---

更新：在进一步的调查中，在我弄清楚到底发生了什么之前，@Vincent似乎走上了正确的道路

import styled, { CSSObject } from "styled-components";

const Container = styled.div({
  userSelect: "none !important"
} as CSSObject);

将生成以下错误：

Conversion of type '{ userSelect: "none !important"; }' to type 'CSSObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type '{ userSelect: "none !important"; }' is not comparable to type 'Properties<string | number>'.
    Types of property 'userSelect' are incompatible.
      Type '"none !important"' is not comparable to type '"contain" | "all" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "none" | "text" | "-moz-none" | "element" | undefined'.ts(2352)

它有点粗糙（将

“none！important”

转换为

“none”

，显然不是），但它可以保持样式化CSS道具的整洁并通过类型检查

---

原始答案：我不熟悉样式化组件的语法（它看起来有点像JSS，但不完全一样）

我建议使用标准语法。样式化组件通常是这样编写的：

const Container = styled.div`
  user-select: none !important;
`;

---

它无法识别

！重要信息

，因此只需将其转换为任何类型即可使typescript安静

styled.div({
  userSelect: 'none !important'  as any
});

编辑-解释为什么这样做 这很简单。如果使用类似atom的ide，则可以“转到”userSelect属性的类型。类型为

UserSelectProperty

，其值必须正好是其中之一

export type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "unset";
export type UserSelectProperty = Globals | "-moz-none" | "all" | "auto" | "contain" | "element" | "none" | "text";

---

因为

没有！重要信息

不是一个选项，您必须将其转换为任何选项。

我只是在寻找稍微相关的内容时遇到了这个问题。我知道它已经解决了，但我已经使用样式化组件很长一段时间了，从来没有看到过您提到的对象语法，我想这是为了允许从js选项中的其他css采用

然而，我评论的原因是您的flex示例，您可以通过标记的模板文本实现非常类似的效果：

const flex = {
  flex: 'display: flex',
  col: 'flex-direction: column'
}

const FlexRow = styled.div`
  ${flex.flex};
`

const FlexCol = styled.div`
  ${flex.flex};
  ${flex.col};
`

---

快乐的样式化组件您使用的是什么

样式化的
库？你能提供一个链接到它的文档或NPM包吗。现在添加。同样，一些ts类型不准确…如果里面没有变量，为什么要使用模板字符串？为什么不仅仅是普通字符串？或者这只是一个例子？如果你的意思是在
容器中
，那应该没有什么区别。与单引号相比，我更喜欢反勾号。另外，这只是一个例子：）谢谢你的建议，但我不喜欢这种语法，因为我不能只合并样式对象，这很烦人。@Jonaswills，谢谢。我会看看我能不能把它写进我的答案中。很酷，谢谢你的全面回答。也要感谢@Vincent！Typescript可能需要一些字符串文字类型组合语法…：）嗯，这实际上修复了错误。你能解释一下这里发生了什么吗？@Vencovsky同样的错误发生在“普通”字符串上。谢谢你的评论——我知道，我更喜欢对象符号有两个原因。1.）我发现为常用组合创建混合插件要容易得多，2.）因为可以将样式对象合并在一起。
const flex = {
  flex: 'display: flex',
  col: 'flex-direction: column'
}

const FlexRow = styled.div`
  ${flex.flex};
`

const FlexCol = styled.div`
  ${flex.flex};
  ${flex.col};
`