React lets you add **CSS inline styles** that are written as attributes and passed to elements. With inline styles, you have the option to combine CSS syntax with JSX code.


> Note: Using the style attribute as your primary means of styling elements is generally ​not​ recommended.​



# Syntax
In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the style name, written in camelCase, and whose value is the style’s value, which is usually a string. 

We can create inline styles in two ways:

- By creating a variable that stores style properties and then passing that variable to the element, like `style={styleVariable}`.
- By passing the styling directly, like `style={{height: '10%'}}`.

# Code
The following code creates inline CSS styles by directly passing the styling as an object:

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      // Passing the styling properties
      // as an object.
      <div>
        <p style={{background: "#74C3E1",
          padding: "20px",
          margin: "20px"}}> Hello, World </p>
      </div>
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

How to create inline styles in React

React uses camelCase object syntax for inline styles, combining CSS with JSX attributes.