scrimba
Styled Components
If else statements in styling
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

If else statements in styling
AboutCommentsNotes
If else statements in styling
Expand for more info
components
Content.js
run
preview
console
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'styled-components'
import Button from './Button'
import Icon from './Icon'

const Title = styled.h1`
color: #aaecf0;
`
const Section = styled.div`
background-color: #aac9f0;
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 15px;
`

const SubTitle = styled(Title)`
font-size: 12px;
align-self: center;
`;

const ParagraphTitle = styled(SubTitle)`
color: grey;
`;

const ReversedTitle = props =>
<ParagraphTitle {...props} children={props.children.split('').reverse()} />

const Content = () => {
return (
<Section>
<Title>💅🏻 Section</Title>
<SubTitle>I am a subtitle</SubTitle>
<Button text='me first' primary/>
<Button text='me second'/>
<Icon border='solid 3px' primary />
<Icon/>
<ParagraphTitle as={ReversedTitle} >I am a paragraph title</ParagraphTitle>
</Section>
)
}

export default Content

//Mini Challenge
//based on the if else statement for the status, can you add your own if else statement
//that will render the green button like a traffic light, based on a prop we pass
//through? Please get rid of the 'primary' prop that controls the background-color to
//do this.
Console
/index.html
-8:32