NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.55k stars 756 forks source link

linaria css in js 在taroui不可用 #1017

Open SidneyLann opened 4 years ago

SidneyLann commented 4 years ago

Taro UI 版本信息

3.0.0-alpha.1

问题描述

linaria css in js 在taroui编译时报错

复现步骤

  1. 配置linaria
  2. 编译

复现代码

import React from 'react' import { Text } from '@tarojs/components' import { AtTag } from 'taro-ui' import { styled } from 'linaria/react'

//const StyledAtTag = styled(AtTag)<{ color: string }>` // not work

const StyledAtTag = styled(Text )<{ color: string }>` //work

color: ${props => props.color} `

class TextTag extends React.Component { render () { return (

{this.props.children}
)

} }

export default TextTag

报错信息

Module build failed (from ./node_modules/_linaria@1.4.0-beta.6@linaria/loader.js): NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: D:\DEV\pcng-client-taro\src\component\Tex tTag.tsx: clearTimeout is not defined

系统信息

3.x

补充信息

linaria css in js用于tarojs/components不会报错,用于taroui不行

taro-ui-bot[bot] commented 4 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

Garfield550 commented 4 years ago

我没有什么 CSS in JS 的经验,希望可以有人帮忙适配一下。

SidneyLann commented 4 years ago

根据这里配置https://taro-docs.jd.com/taro/next/docs/next/css-in-js.html

Garfield550 commented 4 years ago

我指的是组件需要适配 CSS in JS 需要做什么修改,如果重构的代码很多的话可能需要很长时间才能适配完成,

SidneyLann commented 4 years ago

这个不清楚

SidneyLann commented 4 years ago

可以帮找taro开发组的看看吗?

SidneyLann commented 4 years ago

image https://github.com/callstack/linaria/blob/master/docs/BASICS.md 一个普通的组件都可以被修饰,应该不难。

SidneyLann commented 4 years ago

taro的问题,非taroui的问题。在文件\nodemodules\@tarojs_runtime@3.0.0-beta.5@@tarojs\runtime\dist\index.js的 var caf = typeof cancelAnimationFrame !== 'undefined' && cancelAnimationFrame !== null ? cancelAnimationFrame : clearTimeout;前加function clearTimeout() {} 解决问题

SidneyLann commented 4 years ago

有些属性可以,有些不可以。

SidneyLann commented 4 years ago

image 写死的就可以,传参进去不行。应该是某个地方没适配。

SidneyLann commented 4 years ago

import { AtRadio } from 'taro-ui' import { styled } from 'linaria/react'

const RadioInput0 = styled(AtRadio)<{backgroundColor: string}> background-color: ${props => props.backgroundColor};

AtRadio 传参进去也可以。

有些控件可以,有些不行。有些属性可以,有些属性不行。

SidneyLann commented 2 years ago

没进展吗?

SidneyLann commented 2 years ago

linaria已在小程序和RN支持Taro组件了,Taro-ui几时能在小程序和RN支持呢?