鍍金池/ 問答/HTML/ ant design里的組件有什么好的方法對(duì)樣式進(jìn)行單一的修改，而不是全局

ant design里的組件有什么好的方法對(duì)樣式進(jìn)行單一的修改，而不是全局

嘗試過引入一個(gè)自定義的CSS文件，給組件添加樣式的className，但是常常是無效的(樣式CSS優(yōu)先級(jí)沒有問題)。直接修改defalut文件的話又是只能改全局的。不知道有什么好的方法去覆蓋原有樣式，感覺針對(duì)單一組件自定義好麻煩呀。

回答
編輯回答
厭遇

我自己再來總結(jié)一下吧。
要想給antd組件單獨(dú)應(yīng)用自己寫的css樣式，如果只是添加添加自定義的類名，然后將對(duì)應(yīng)樣式隨便寫在一個(gè)css文件里引入到j(luò)s中有時(shí)是不會(huì)起作用的。
正確的方法其實(shí)就是官網(wǎng)里給的第二個(gè)方法，但是當(dāng)時(shí)沒看明白。。。

1、首先直接給組件添加className
2、在項(xiàng)目的src文件夾->themes文件夾->index.less文件里面引入antd的入口文件，這樣才能對(duì)樣式中的變量等進(jìn)行覆蓋修改。

@import "../../node_modules/antd/lib/style/themes/default.less";

3、然后只有在項(xiàng)目的src文件夾->themes文件夾->index.less文件里面使用上一個(gè)回答的less語法，才能覆蓋原有樣式(我的是套在global里寫才應(yīng)用成功的)

:global {
  .yourClass{
       .ant-table-thead > tr > th {
        background: #f5f7fa;
        color: #596268;
        font-size: 14px;
        font-weight: bold;
        cursor: default;
        text-align: left !important;
      }
  }
}

4、注意index.less文件要import到項(xiàng)目的入口文件中

2017年2月26日 14:11
編輯回答
舊城人

比如更改ant design的table組件，自定義你的單一組件外邊的外邊的類名中去改

.yourClass{
       .ant-table-thead > tr > th {
        background: #f5f7fa;
        color: #596268;
        font-size: 14px;
        font-weight: bold;
        cursor: default;
        text-align: left !important;
      }
}
簡(jiǎn)單說，就是你自己的類包住antd，然后再改它的，在你想用的組件中調(diào)用yourClass
2017年7月5日 07:01