如何在devextreme中切换主题?

时间:2018-06-18 09:53:47

标签: css reactjs styles themes devextreme

我的HTML / TSX代码:

[HTML]
...
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.softblue" href="css/dx.softblue.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.dark" href="css/dx.dark.css" data-active="true" />
...

[TSX]
...
import 'devextreme/dist/css/dx.common.css';
// import 'devextreme/dist/css/dx.softblue.css';
// import 'devextreme/dist/css/dx.light.css';
// import 'devextreme/dist/css/dx.dark.css';
...
export class SgpZikRoot extends React.Component {
    public sgpChildren: any[] = [];
    public dxChildren: any[] = [];

    valueChanged(e: any) {
        let th = 'generic.' + e.value;
        dxThemes.current(th);
        this.refreshTheme(window['sgpReactRoot']);
    }

    refreshTheme(o: any) {
        if (o.sgpChildren && o.sgpChildren.length) {
            for (let i = 0; i < o.sgpChildren.length; i++) {
                this.refreshTheme(o.sgpChildren[i]);
            }
        }
        if (o.dxChildren && o.dxChildren.length) {
            for (let j = 0; j < o.dxChildren.length; j++) {
                if (o.dxChildren[j].instance.repaint) {
                    o.dxChildren[j].instance.repaint();
                }
            }
        }
    }

    render() {
        let items: any[] = [
            'softblue',
            'light',
            'dark',
        ];

        this.sgpChildren = [];
        this.dxChildren = [];
        return (
        ...
        <SelectBox items={items} onValueChanged={(e) => { this.valueChanged(e); }} />
        ...

结果是

  

拒绝应用“http://extentreports.com/docs/versions/2/net/#append-to-report”的样式   因为它的MIME类型('text / html')不是受支持的样式表MIME   类型,并启用严格的MIME检查。

     

拒绝应用“http://localhost:8080/css/dx.common.css”的样式   因为它的MIME类型('text / html')不是受支持的样式表MIME   类型,并启用严格的MIME检查。客户?f9d3:77 [WDS]热门   启用模块替换。

  

W0004 - 主题加载超时结束:generic.dark。看到:   http://localhost:8080/css/dx.dark.css

可能是css文件未复制到结果网站...如何设置webpack?

0 个答案:

没有答案