styled components && rails && themes && SSR

app_javascript_components_Hello.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import styled, {ThemeProvider} from 'styled-components';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

Button.defaultProps = {
  theme: {
    main: 'palevioletred'
  }
}

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: ${props => props.theme.main};
`;

Title.defaultProps = {
  theme: {
    main: 'palevioletred'
  }
}

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

class Hello extends React.Component {
  constructor(props) {
    super(props);
    if (props.color !== undefined) {
      this.state = {theme: {main: props.color}, color: 'primary'}
    } else {
      this.state = {theme: {main: 'palevioletred'}, color: 'primary'}
    }
    this.changeTheme = this.changeTheme.bind(this);
  }

  changeTheme() {
    if (this.state.color == 'primary') {
      this.setState({theme: {main: 'mediumseagreen'}, color: 'secondary'})
    } else {
      this.setState({theme: {main: 'palevioletred'}, color: 'primary'})
    }
    console.log('theme', primaryTheme);
  }
  render () {
    return(
      <ThemeProvider theme={this.state.theme}>
        <Wrapper>
          <Title>
            Hello {this.props.name}, this is my first styled component!
          </Title>
          <Button onClick={this.changeTheme}>Themed</Button>
        </Wrapper>
      </ThemeProvider>
    )
  }
}

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

export default Hello;

show.html.erb

<%= javascript_pack_tag('server_rendering') %>
<%= react_component("Hello", { name: "React", color: '#70a0db' }, {prerender: true}) %>