tt、weaap组件样式兼容问题[Taro]

1. className 属性传递

   1. 可以通过设置[ComponentClass].externalClasses = ['ex-class'] 方式将外部样式引入到组件内部【weapp tt都支持】，故可以在写组件的时候使用下面代码为示例

import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

import { useThrottle } from './hooks'



import './index.scss'



const ButtonView = (props) => {

  const { className = '', style = {} } = props

  const _class = `ex-clas ${className}`

  return (

    <View className={_class} style={style} onClick={useThrottle(props)}>

      {props.children}

    </View>

  )

}

ButtonView.options = { virtualHost: true }

ButtonView.externalClasses = ['ex-class']



export default Taro.memo(ButtonView)

2. H5、rn、alipay 直接支持className传递进入组件内部

2. virtualHost

   1. 可通过设置[ComponentClass].options = { virtualHost: true }，去掉组件默认的那层包裹，使得组件内部和外部联通，组件内部可使用{flex:1,width:80%}这种依赖于组件外部的弹性布局

TT官方说明

组件样式

组件对应

ttss 文件的样式，只对组件

ttml 内的节点生效。编写组件样式时，需要注意以下几点：

• 继承样式，如

font 、

color ，会从组件外继承到组件内；

• 除继承样式外，

app.ttss 中的样式、组件所在页面的的样式对自定义组件无效。

另外，自定义组件节点默认会被一层

inline 元素包裹，直接在自定义组件节点上使用

padding/margin/height 等样式不生效，如有在自定义组件节点上直接设置上述样式的需要，请先设置为

block 等样式。

<custom-component

style="display:block;padding:10px;background-color:red"

外部样式类

此功能正在支持中。

2. 支付宝、H5、RN天然无包裹层阻挡
3. tt平台现阶段不支持virtualHost，无法将组件外部和内部联通。故组件的大小必须内部有明确的值
4. tt平台的position：absolute，并不会默认left:0,top:0；需要显式设置

\