Styled Components with Emotionjs

Tired of trying to use an Index.css. Try Emotionjs!

What is Emotionjs?

Emotionjs is a library that allows you to write css with Javascript.

Styled Components

One way styling your site is to use styled components.

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

function Todoform(){
return (
        <FormDiv>
            <TitleP onClick={HandleClickFive}>Have Something More To-do?</TitleP>
            <form onSubmit={handleHandlerSubmit}>
                <p><TaskInput onChange={handleChange} type="text" name="task" placeholder="Task"></TaskInput></p>
                <p><TaskInput onChange={handleChange} type="text" name="category" placeholder="Category"></TaskInput></p>
                <SubmitButton type="submit">Add New Task</SubmitButton>
            </form>
        </FormDiv>
    )
}

const FormDiv = styled.div`
background-color: darkgray;
padding: 20px;
background-size: 100%
`

const TaskInput = styled.input`
width: 70%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
`
const TitleP = styled.p`
font-size: 30px;
`

const SubmitButton = styled.button`
border-radius: 12px;
background-color: black;
color: white;
width: 150px;
height: 50px;
`

This allowed me to create components inside my file to customize my form. As you can see above I created components and then used those instead on my regular javascript elements. You can also create a separate file for your component and import it into your code. This would be really handy to use if you wanted a specific element to be styled the same throughout your code.

Using CSS Prop

Another way to use Emotionjs is by using css as a prop.

import React from 'react'
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      backgroundColor: 'forestgreen',
        color: 'white'

    }}
  >
    This has a green background.
  </div>
)

By using the css prop, I was able to edit the line of text inside the div. This allows you to directly edit the styles inside your code lines.

There is much more you can do with Emotionjs, but I will not be covering it with the post. Feel free to check out the docs here Emotionjs.