如何将嵌套样式应用于我的反应表单组件，只有主要样式附加而不是嵌套样式

问题描述

const formContainer = {
    maxWidth: "300px",backgroundColor: '#FD439B',padding: "10px","& textarea" : {
      width: '100%',padding: '15px',margin: '5px 0 22px 0',border: "none",background: '#F1F1F1',resize: "none",minHeight: '200px'
    },"& focus" : {
      backgroundColor: '#ddd',outline: 'none'
    };
JS Code :
<div class="formContainer" style={formContainer}>

使用此代码，只有 formContainer maxWidth,backgroundColor,padding 正在追加，剩余的代码如 textarea，焦点样式未出现。

解决方法

使用 Material-UI 样式：

import React from "react";

import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {    
    
    maxWidth: "300px",backgroundColor: '#FD439B',padding: "10px","& textarea" : {
     width: '100%',padding: '15px',margin: '5px 0 22px 0',border: "none",background: '#F1F1F1',resize: "none",minHeight: '200px'
   },"& textarea:focus" : {
     backgroundColor: '#ddd',outline: 'none'
   }    

  }
});

function TypographyTheme(props) {
  return (
    <div className={props.classes.root} contenteditable="false">
      <textarea>
        "This div's text looks like that of a button.
      </textarea>
    </div>
  );
}


export default withStyles(styles)(TypographyTheme);

Demo