kjosavik

import React from 'react'
import styled from 'styled-components'

export default props => (
  <MyBeautifulButton>Click Me</MyBeautifulButton>
);

const MyBeautifulButton = styled.button`
  margin: 16px;
  border: solid palevioletred 2px;

kjosavik

#main {
  padding: 32px;
  border: outset rgba(247, 159, 121, 1) 1px;
  border-radius: 4px;
}

#output-area{
  min-height: 128px;
  margin: 16px;
  cursor: default;

kjosavik

import React from 'react';
import '../assets/css/withoutStyledComponents.css'

export default class WithoutStyledComponents extends React.Component{
  constructor(props){
    const defaultOutput = "Change me...";

    super(props);
    this.state={
      value: defaultOutput,

kjosavik

import React from 'react';
import styled from 'styled-components';

export default class WithStyledComponents extends React.Component{
  constructor(props){
    const defaultOutput = "Change me...";

    super(props);
    this.state={
      value: defaultOutput,