跨平台框架Taro开发小程序中遇到的坑

  1. 自定义组件样式不生效的问题

    • 组件外部样式不生效

      组件是一个独立的区域,默认外部样式不会影响到组件内的效果,但如果想让组件完全受外界控制,可能通过设置addGlobalClass:true来实现
      // 组件 中设置静态属性
      static options = { 
          addGlobalClass: true 
      }
      如果只是想让个别外部样式在组件内生效,则可以通过props传参的方式实现
      // red为外部样式,如:.red{color:#f00} .footer={position:absolute} 
      
      // 组件内接收 
      export default class MyComponent extends Component{ 
          static externalClasses = ['mycolor','myposition']
          render () { 
              return 
              我是自定义组件
               
          } 
      }
    • 引入样式不生效

      自定义组件对应的样式文件, 只对该组件内的节点生效,如果自定义组件中还使用其它第三方组件,则样式不一定生效,另外, 尽量使用类选择器设置样式,id选择器,标签选择器,属性等选择器等不能在自定义组件中使用。
    • 自定义组件默认样式

      使用:host选择器,类似于web中设置html,body的样式
          :host{ font-size:16px; color:#58bc58 }
    后期不断更新中...

你可能感兴趣的:(taro,小程序,微信小程序)