# 
## Overview

In this shot, we will learn how to use the `styled-components` of the `npm` package in our ReactJS application. With styled-components, we can style our React application without worrying about duplicate class names and while maintaining our styles and so on.

## Installation

We will run the following command in the terminal to install a React project:

```
npx create-react-app styledexample
```

To install the `styled-components` package inside our React project from the terminal, we will use the following command:

```
npm i styled-components
```

## Example

Now, we'll use the `styled-components` package to style a `div`, `button`, and an `input` field. We will then use backticks to style the HTML tags.


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



import React from "react";
import styled from "styled-components";

const SubmitButton = styled.button`
  padding: 10px;
`;

const FormInput = styled.input`
  border-radius: 10px;
`;

const Container = styled.div`
  padding: 10px;
  margin: 10px;
`;

const App = () => {
  return (
    <Container>
      <SubmitButton>Submit </SubmitButton>
      <FormInput placeholder="Names"></FormInput>
    </Container>
  );
};

export default App;


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

GoJS React

Typescript React

Vue.js

## Explanation

Lines 5–7: We create a styled button called `SubmitButton`.

Lines 9–11: We create a styled input field called `FormInput`.

Lines 13–16: We create a styled div called `Container`.

Lines 20–23: We use these styled components as tags inside our application.

In the output, we can see how the styles are applied to their respective tags.


How to use styled components in ReactJS

Install styled-components via npm in a React project to style components without class conflicts.