【快应用】父组件中如何设置子组件样式

​问题背景：

子组件被引用时，如果在父组件的布局效果不理想，需要去修改子组件对应的样式，是比较麻烦的，现在快应用在1100版本之后推出了externalClasses属性，可以将外部样式直接传给自定义组件，便于开发者调试。

 

使用方式:

1、子组件中声明传递的样式externalClasses: ['childstyle']和class=”childstyle”。

2、父组件里调用childstyle=”parentstyle。”

 

相关代码：

child.ux:

<template>

  <div class="container">

    <text class="txt" onclick="click">child button</text>

  </div>

</template>

<style>

  .container {

    flex: 1;

    flex-direction: column;

    align-items: center;

  }

</style>

<script>

  import prompt from '@system.prompt';

  export default {

    externalClasses: ['txt'],

    click() {

      prompt.showToast({

        message: 'this is child',

      })

    }

  }

</script>

 

parent.ux:

<import name="child" src="../New/child.ux"></import>

<template>

  <div class="container">

    <text class="txt">hello</text>

    <child txt="parentxt"></child>

  </div>

</template>

<style>

  .container {

    flex: 1;

    flex-direction: column;

    align-items: center;

  }

  .txt {

    height: 150px;

    width: 85%;

    margin-bottom: 15px;

    border: 1px solid #000000;

  }

//父组件设置样式

  .parentxt {

    background-color: #00fa9a;

    height: 150px;

    width: 85%;

    align-items: flex-start;

    margin-bottom: 15px;

    border-color: #9400D3;

    border-width: 5px;

  }

</style>

 

运行截图：

​

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

​