简介

使用方式

import{parse}from'@tarojs/parse-css-to-stylesheet'// Harmonyconst{ code}=parse(jsxCode,[cssCode1,cssCode2, ...],{platformString:'Harmony',isEnableNesting:true// 支持解析嵌套选择器，默认关闭})// code: jsx代码 string

参数说明

exportinterfaceParseOptions{platformString:string;// 平台：'Harmony'isEnableNesting?:boolean;// 是否支持嵌套解析}exportinterfaceParseResult{code:string;// 输出的jsxcode}// 样式解析exportfunctionparse(component:string,styles:Array<string>,options:ParseOptions):ParseResult;

ParseOptions

ParseResult

样式支持情况

通用属性

文本样式

// ✅ 允许<TextclassName="txt">hello</Text>

// ✅ 允许<ViewclassName="txt">hello</View>

// ❌ hello 父级没有添加文本样式，txt的文本属性无法继承下去<ViewclassName="txt"><Text>hello</Text></View>

CSS 选择器

通用选择器

伪元素 / 伪类

CSS 变量

:root {--color:#403635;--angle:30deg;--var:var(--color,30px);}.hello {height:30px;color:var(--color);}

常见问题

1. 跨组件传递 className、style

❌ 错误做法

// ./components.jsimport{View,Text}from"@tarojs/components";// 这里的Image实际上是对TaroImage的二次封装，一样的暴露出style和classname使用export{defaultasImage}from"./xxxx";

// 注意：这里的组件从统一入口进行导入import{View,Image}from"./components";functionIndex(){return(<ViewclassName="xxx"><ImageclassName="xxxxxx"/></View>);}

✅ 正确做法

// 自定义组件引入import{Image}from"./components";// Taro组件引入import{View}from"@tarojs/components";functionIndex(){return(<ViewclassName="xxx"><ImageclassName="xxxxxx"/></View>);}