鍍金池/ 問答/HTML/ react dva框架如何配置css啊

react dva框架如何配置css啊

之前不怎么在意，到現(xiàn)在麻煩大了呀，不能動態(tài)設(shè)置類名了

現(xiàn)在類名要這樣添加

import style from ./index.less

<p className={style.xxx}></P>

在控制臺看的類名后面會跟上xxx_隨機(jī)碼

怎么配置啊，求前輩們給個鏈接

回答
編輯回答
背叛者

[知識點(diǎn)]
在這個頁面中看css modules ，里面的全局用法和package用法
css modules

效果圖
[html]<span class="stageBox stage1">申請中</span>
實(shí)際上，后臺給到的數(shù)據(jù)只有 狀態(tài)值1,2，3而已

首先引入
import classnames from 'classnames';

在render return部分引入自己寫的組件名，比如我起的
<Test1 type='tests' />

在render內(nèi)，return前，構(gòu)建這個組件
const Test1 = (props) => {

      var statusTxt;
      var cls;
      switch (status) {
        case 0:
        statusTxt='暫無意向';
        cls = classnames({
          stageBox: true,//true表示必須有的樣式
          stage0: props.type === 'tests',//表示可以變化的樣式，只要是對應(yīng)type的（可以寫多條）
        });
          break;
        case 1:
        statusTxt='申請中';
        cls = classnames({
          stageBox: true,
          stage1: props.type === 'tests',
        });
          break;            
        default:
        statusTxt='';
        cls = classnames({
          stageBox: props.type === 'tests', 
        });
      }
    return <span className={cls}>{statusTxt}</span>;
  }

之后在對應(yīng)的樣式文件里寫全局樣式
:global(.stage1){

background:#e9f8ef;
color:#23bb64;

}

不過這個是一個應(yīng)付的，能用的辦法，還是希望樓下有大神能提供簡便的解決方式（樣式特別復(fù)雜的情況下寫switch很蛋疼）

2017年2月9日 07:51