Everything is in one place — logic, styling, and markup. Styled components.

props-styled-components.jsx

// You can pass a function to your style declarations with one parameter which is component's
// props. You can then use props to adjust your styling.
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'styled-components'

const StyledButton = styled.button`
    border-radius: 5px;
    background-color: ${props => (props.secondary ? '#F7A072' : '#a1cdf1')};
    color: #fff;
    padding: 10px 15px;
    outline: none;
    border: none;
    cursor: pointer;
    margin: 15px;
`


const Application = () => {
    return (
        <div>
            <StyledButton>Click me</StyledButton>
            <StyledButton secondary>Click for secondary Action</StyledButton>
        </div>
    )
}

styled-components-example.jsx

// Basic Usage of Styled-Components
import React from 'react'
import styled from 'styled-components'

const StyledButton = styled.button`
    border-radius: 5px;
    background-color: #a1cdf1;
    color #fff;
    padding: 10px 15px;
    outline: none;
    border: none;
    cursor: pointer;
`

const Application = () => {
    return <StyledButton onClick={() => console.log('clicked')}>Click me</StyledButton>
}