An idea to get rid of the black border

Let’s take a look at the implemented style first

Note: The OfficialAccount component sets the minimum width to 300px and the height to a fixed value of 84px. And a page can only load a concerned public number component

Let’s cut to the dry stuff

import Taro from '@tarojs/taro'
import { View, OfficialAccount } from '@tarojs/components'

import './cFollow.scss'

function CFollow () {
  const [show, setShow] = Taro.useState(true) // Do not display DOM when loading fails to improve performance
  const [hidden, setHidden] = Taro.useState(true) // Display the DOM when the load succeeds

  / * * *@description: Callback after loading successfully *@return {*}* /
  const onLoad = () = > setHidden(false)

  / * * *@description: callback for loading failure *@return {*}* /
  const onError = () = > setShow(false)

  return show && (
    <View className='c-follow' hidden={hidden}>
      <View className='c-follow-warp'>
        <OfficialAccount
          onLoad={onLoad}
          onError={onError}
          className='c-follow-wx'
        />
      </View>
    </View>)}export default Taro.memo(CFollow)
Copy the code

SCSS code

.c-follow {
  width: 700px;
  height: 170px;
  display: flex;
  padding: 0 18px;
  margin: 16px auto;
  background: #fff;
  align-items: center;
  border-radius: 28px;
  box-sizing: border-box;
  justify-content: center;

  &-warp {
    position: relative;
    width: 100%;
    height: 80PX;
    overflow: hidden;
  }

  &-wx {
    position: absolute;
    top: -2PX;
    left: -2PX;
    width: calc(100% + 4PX); }}Copy the code