CODEWITHSUNDEEP
reactjs
ram
ram

Reputation: 21

How to apply style to letters in ReactJS?

I am a beginner to ReactJS. I am trying to display some letters with color coded as described below. I am able to display the letters in the browser. However, I am not able to display it color coded. Please help me out in fix the error in the following HTML code.

  <!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>

Upvotes: 0

Views: 463

Answers (1)

Cristina
Cristina

Reputation: 21

It looks like letterStyle was created but never used it. If you want to use in-line styling, I believe you will want it to look something like this:

 return (
    <div style={letterStyle}>
       {this.props.children}
    </div>
  );

Upvotes: 2

Related Questions