在线等，挺急的！想请教类似于Ant Design这种UI库和emotion这种CSS-IN-JS库解决的是同一个问题吗？感激不尽

Question

我是一个前端新手正在学习React。一直觉得写css是一件很痛苦的事情，搜索一些比较先进的css方案之后发现了Styled-Components和emotion这种CSS-IN-JSlibrary，发现可以把react组建和css更好的封装在一起。再之后我又了解到了AntDesign这个UI库，发现它提供了很多已经自带样式的组建，比如我想请教各位3个问题：1.AntDesign这种UI库存在的意思是为了提供一些马上就能使用的，自带样式的的组件吗？比如说AntDesign的，其实是把HTML本身的Button给封装了一遍然后自带了css？如果这样的话，如果我不喜欢AntDesign给我的样式，我可以自己设定样式去覆盖掉它原本的样式吗？2.请问如果使用styledcomponents或者emotion这种CSS-IN-JSlibrary，是不是说我就可以把css封装在组建里面，从而达到组建自带样式的效果？那这样的话，一个使用CSS-IN-JSlibrary的项目，理论上可以达到不使用css文件的地步吗？3.我发现一些UI库，像rebass（https://github.com/rebassjs/r...），是建立在Styled-Components之上的。请问这种UI库跟传统的Bootstrap或者AntDesign（我其实不清楚AntDesign能不能跟Styled-Components一起使用）有什么区别吗？感谢大家

Answer 1

其实不管是css-in-js还是less或者scss对于开发者而言只是写css的形式变化了，你同样还是需要写css的，只是外观的表现形式不同了。ant-desigin组件，就是已经写好样式的一些通用组件，避免业务人员重复开发。当然可以自定义样式，你可以用自己的样式覆盖ant-design的组件