A simple example with styled component

SimpleComponent.js

import React, { useState } from 'react'
import styled from 'styled-components'

// define styled component container 
const SimpleComponentContainer = styled.div`
  background-color: ${({ counter }) => counter > 10 ? 'red' : '#ddd' };
`

export default function SimpleComponent(){

  const [counter, setCounter] = useState(0)
  
  function handleOnClick(e){
    e.preventDefault()
    setCounter(counter + 1)
  }
  
  return (
    <SimpleComponentContainer counter={counter}>
      <h1>Counter: {counter} </h1>
      <button onClick={handleOnClick}> Click me! </button>
    </SimpleComponentContainer>
  )
}