如何将样式应用于ReactJS中的字母？_Reactjs

如何将样式应用于ReactJS中的字母？

reactjs

如何将样式应用于ReactJS中的字母？,reactjs,Reactjs,我是个初学者。我试图显示一些颜色编码的字母，如下所述。我能够在浏览器中显示字母。但是，我无法显示它的颜色编码。请帮助我修复以下HTML代码中的错误 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> React1</title> <style>

我是个初学者。我试图显示一些颜色编码的字母，如下所述。我能够在浏览器中显示字母。但是，我无法显示它的颜色编码。请帮助我修复以下HTML代码中的错误

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title> React1</title>
        <style>
            #container {
                padding: 50px;
                background-color: #EEE;
    
            }
            #container h1 .letter{
                font-size: 144px;
                font-family:sans-serif;
                color: #0080A9;
            }
        </style>
      </head>
      <body>
        <div id="container"></div>
    
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
       <script type="text/babel"> 
    
    class Letter extends React.Component {
    render() {
        var letterStyle = {
          padding: 10,
          margin:10,
          backgroundColor: this.props.bgcolor,
          color: "#333",
          display: "inline-block",
          fontFamily: "monospace",
          fontSize: 32,
          textAlign: "center"
        };
      return (
        <div>
           {this.props.children}
        </div>
      );
    }
    
    }
    
    var destination = document.querySelector("#container");
      ReactDOM.render(<div>
          <Letter bgcolor="#58B3FF">A</Letter>
          <Letter bgcolor="#58B3FF">E</Letter>
          <Letter bgcolor="#58B3FF">I</Letter>
          <Letter bgcolor="#58B3FF">O</Letter>
          <Letter bgcolor="#58B3FF">U</Letter>
      </div>,
      destination
    
      )
    
    </script>
    </body>
    
    </html>


反应1
#容器{
填充：50px；
背景色：#EEE；
}
#集装箱h1.信件{
字体大小：144px；
字体系列：无衬线；
颜色：#0080A9；
}
类字母扩展了React.Component{
render（）{
var字母样式={
填充：10，
差额：10，
背景颜色：this.props.bgcolor，
颜色：“333”，
显示：“内联块”，
fontFamily：“单空间”，
字体大小：32，
textAlign：“居中”
};
返回(
{this.props.children}
);
}
}
var destination=document.querySelector（“容器”）；
ReactDOM.render(
A.
E
我
O
U
,
目的地
)

它看起来像是创建了

字母样式，但从未使用过它。如果您想使用内嵌样式，我相信您会希望它看起来像这样：
 return (
    <div style={letterStyle}>
       {this.props.children}
    </div>
  );

返回(
{this.props.children}
);
它看起来像是创建了字母样式，但从未使用过它。如果您想使用内嵌样式，我相信您会希望它看起来像这样：
 return (
    <div style={letterStyle}>
       {this.props.children}
    </div>
  );

返回(
{this.props.children}
);
JSX元素（例如div
）将具有样式和类名属性。样式是css属性，className
是css类。在呈现您的字母时
组件将
更改为
，您能给出一个简单的示例吗？我看到有一个h1
的样式，但我在其他地方没有看到。JSX元素（例如div
）将有一个样式和一个类名属性。样式是css属性，className
是css类。在呈现您的字母时
组件将
更改为
，您能给出一个简单的示例吗？我看到有一个h1
的样式，但我在其他地方看不到。