使用react+redux技术在页面实时编辑CSS代码，点击提交之后怎么能够使页面根据编写的CSS样式进行改变？

Question

有这么一个问题

提供一个编辑区域，能够随意编写CSS代码，然后提交之后能够更改这个页面的一些样式
比如：

div {
   border-color: red;
}

a {
   color: yellow; 
}

这样提交之后，页面上的div的边框都会变成红色，a标签文字变成黄色

使用的技术是利用react+redux更改其state来进行更改CSS样式

希望能够得到一些解决方案，谢谢啦

我自己的想法

在componentDidMount的时候，使用document.queryselector()去循环处理CSS的样式对象，把添加的CSS样式用style加上去，不知道这样的方案是否合理？

Answer 1

很有趣的需求，有一个想法，不知道能不能行

1. 放一个script组件在页面上

2. 当style组件componentDidMount的时候，获取提交的样式，然后在render里面把样式放到里面

类似这样:

class CustomStyle extends Component {
  componentDidMount(){
    //... 获取style，并保存到state中
  }

  render(){
    return (
      <style>{this.state.styles}</style>
    )
  }
}

没有试过，你可以试试

Answer 2

我理解你的意思：我在文本框输入border-color:#000 点击提交，下方页面显示的框就会显示黑色，是这样的嘛？
如果是这样，那你把文本框的信息提取输入，点击提交的时候，setState应该可以把

那么页面下方的这个div的样式就可以这样写了

<div style={ this.state.borderColor }>
    //.......
</div>

Answer 3

其实这个解决方案很简单，在提交之后：

// 获取输入框里面的文本内容
const styleContent = ...;
// 创建一个 <style> 标签元素
const styleElement = document.createElement('style');
// 添加样式内容
styleElement.innerHTML = styleContent;
// 放倒 head 里面
document.querySelector('head').appendChild(styleElement)