[JavaScript知识库]taro UI的Modal使用踩坑:不正常显示、无法控制显隐(已解决)

今天码代码的时候用到了react + taoro ui，taro ui的modal，但是用的时候无论怎么用isOpened控制显隐，对话框总是显示，即使isOpened是false，并且完全没有官网示例的样式。

先说下用法吧，和官网用法一样即可，因为层级非常高，所以写在那个地方都可以。

看下示例代码(复制的官网的)，visible为布尔值true或者false

           <AtModal isOpened={visible}>
                <AtModalHeader>标题</AtModalHeader>
                <AtModalContent>
                    这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室
                    这里是正文内容，欢迎加入京东凹凸实验室
                </AtModalContent>
                <AtModalAction>
                    <Button>取消</Button> <Button>确定</Button>
                </AtModalAction>
            </AtModal>

就是这段代码，以为会和官网有一样的效果，但是却出现了下面的情况：?

?不仅样式全无乱七八糟，且总是显示(无论isOpened是true或false)；同时还没有层级，写在哪里就在那里出现。

这个问题困扰了我一整天，最后终于整明白了，罪魁祸首就是没有引入taro的样式(对于这点很奇怪，其他的组件比如AtButton没有引入组件都可以正常显示，modal却不行)，引入下面这行代码，就可以正常显示了。(直接在相关页面引入就行了，不用管路径什么的)

import 'taro-ui/dist/style/index.scss';

现在来看一下好不容意得到的正常的样式：