React 使用 style tag 问题

Question

如题:

在React项目中使用style标签, 伪代码如下:

xx.scss 文件

.xx:{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1001;
    width: 270px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

组件文件:

    import Style from xx 
    <div className=xx> 
        <style dangerouslySetInnerHTML={{ __html: Style }} /
    </div>

在console一直报 Warning: Prop dangerouslySetInnerHTML did not match. , 将 <style dangerouslySetInnerHTML={{ __html: Style }} 改写为

style dangerouslySetInnerHTML={{ __html: `
.xx:{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1001;
    width: 270px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
` }}

则错误消失;求指导

Answer 1

既然这样为什么不直接import xx;

Answer 2

CSS Modules 需要了解一下

import Style from xx

引入打印出来 的实际是这样的
{

xx: ....

}

{{ __html: Style }} 接受的字符串 但实际给的是对象

Answer 3

貌似和style-loader有关。

import Style from xx

这里的Style在导入进来后，应该是一个JSON对象。你这样试试？

<style dangerouslySetInnerHTML={{ __html: `${JSON.stringify(Style)}` }} /