taro + linaria styled 报错 Property ‘__linaria‘ is missing

今天药忘吃喽~ 2023-01-16 15:24 106阅读 0赞

**更新**， 下面的解决方案不好，估计暂时不支持，我先用css 功能。

## 报错信息 ##

/*
     * @FileDescription: 
     * @Author: 刘凯
     * @Date: 2021-04-26 08:53:19
     * @LastEditors: 刘凯
     * @LastEditTime: 2021-04-26 13:10:03
     */
    import React from 'react'
    import {
         View } from '@tarojs/components'
    import {
         styled } from 'linaria/react'
    
    const Title = styled(View)<{
         color: string }>`
      color: ${
          props => props.color}`; // 抛红报错
    
    const Index: React.FC = () => {
        
      return <Title color='red'>
        Hello World!
      </Title>
    }
    
    export default Index

Argument of type '(props: any) => any' is not assignable to parameter of type 'StaticPlaceholder'.
      Property '__linaria' is missing in type '(props: any) => any' but required in type 'StyledMeta'

## 报错大概原因 ##

View 组件props 声明是没有 style 属性的， 所以导致 `styled(View)` 有问题， 尝试在View 组件的类型声明中 添加 style 声明后就不报错了。

## 报错解决方案 ##

> 通过 `styled.view` 方式来替换 `styled(View)`

/*
     * @FileDescription: 
     * @Author: 刘凯
     * @Date: 2021-04-26 08:53:19
     * @LastEditors: 刘凯
     * @LastEditTime: 2021-04-26 13:10:03
     */
    import React from 'react'
    import {
         View } from '@tarojs/components'
    import {
         styled } from 'linaria/react'
    
    const Wrapper = styled.view<{
        color: string}> `
        color: ${
          props => props.color}
    `
    
    const Index: React.FC = () => {
        
      return <Title color='red'>
        Hello World!
      </Title>
    }
    
    export default Index