Semantic UI 和Element UI是否冲突

Dear 丶 2021-06-24 16:11 391阅读 0赞

semantic ui 官网：[https://semantic-ui.com/introduction/getting-started.html][https_semantic-ui.com_introduction_getting-started.html]  
element ui 官网：[http://element.eleme.io/\#/zh-CN/component/installation][http_element.eleme.io_zh-CN_component_installation]  
秉着能懒则懒的态度，如果能从两个UI组件库里面挑选合适的UI 组件，岂不是多了一种选择？本来是想用bootstrap和element ui组合的，可是貌似不太合手，所以打算把bootstrap换成semantic ui（这两个ui 组件是冲突的）。  
查看一个简单的样式使用，Button：  
semantic ui:

<button class="ui secondary button">
      Okay
    </button>
    <button class="ui button">
      Cancel
    </button>

element ui:

<el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

#### 所以，从简单的button来看，在使用上，是能明显区分出使用的是哪一个UI的。 ####

那么，再看一些 UI 组件内的命名是否会有冲突：  
semantic UI:

![2789632-41d9676726ab0855.png][]

element ui:

![2789632-2464803c9218b99f.png][]

从dom结构来开，两个UI组件的命名也是不会发生冲突的，很明显两个组件一个用ui开头去命名，一个用el开头去命名。  
所以这两个组件用起来应该不会有太大的问题的，如果有问题，再做调整好了。可以放心替换啦……

![2789632-7288057cea71c89c.png][]

![2789632-c4a1faef007ab8e1.jpg][]

[https_semantic-ui.com_introduction_getting-started.html]: https://semantic-ui.com/introduction/getting-started.html
[http_element.eleme.io_zh-CN_component_installation]: http://element.eleme.io/#/zh-CN/component/installation
[2789632-41d9676726ab0855.png]: /images/20210615/9bcdb01d8d544be7b2fb8de347505701.png
[2789632-2464803c9218b99f.png]: /images/20210615/0fa28aff3f004dd1a4512961ce20f81d.png
[2789632-7288057cea71c89c.png]: /images/20210615/3427c1bc7d7442db9570afb9ac28eae1.png
[2789632-c4a1faef007ab8e1.jpg]: /images/20210615/a1ce54d606c549b59bd01cb94746b319.png