组件嵌套样式问题

[SzHeJason]

问题描述
组件嵌套样式无法正常工作

复现步骤

1. 创建父子组件
2. 在页面上使用
3. 父子组件样式混乱

// 父级
import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

import './index.scss'

export default class AtFlex extends Taro.Component {
  render () {
    const rootClass = ['at-flex']

    return <View className={rootClass}>{this.props.children}</View>
  }
}

// 子级
import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

import './index.scss'

export default class AtFlexItem extends Taro.Component {
  render () {
    const rootClass = ['at-flex__item']
    return <View className={rootClass}>{this.props.children}</View>
  }
}

// 父级样式
.at-flex {
  display: flex;
}

// 子级样式
.at-flex {
  @include display-flex();
}

期望行为
能与正常DOM节点样式一致

系统信息

• 操作系统: macOS
• Taro 版本 V1.0.0-beat-1
• Node.js 版本 8.11.2

[zacksleo]

你是说父级样式不在子级中起作用？ 如果是这个意思，小程序的组件就是这样的，无法与DOM一致

[SzHeJason]

不是啊 是指当出现 父子级组件的时候 父级组件 影响不了子级组件的样式 比如 父级有 display:flex 子级有 flex:1 这种情况样式没有得到预期的效果

[SzHeJason]

小程序本身好像就不支持这种方式 我关闭这个issue吧