Стилизованные компоненты с Emotionjs

Устали от попыток использовать Index.css. Попробуйте Emotionjs!

Содержание

Что такое Emotionjs?
Стилизованные компоненты
Использование CSS Prop

Что такое Emotionjs?

Emotionjs — это библиотека, которая позволяет писать css с помощью Javascript.

Стилизованные компоненты

Один из способов стилизации вашего сайта — использование стилизованных компонентов.

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;
`

Вход в полноэкранный режим Выход из полноэкранного режима

Это позволило мне создать компоненты внутри моего файла для настройки моей формы. Как вы можете видеть выше, я создал компоненты и затем использовал их вместо обычных элементов javascript. Вы также можете создать отдельный файл для компонента и импортировать его в свой код. Это было бы очень удобно, если бы вы хотели, чтобы определенный элемент был оформлен одинаково во всем коде.

Использование CSS Prop

Еще один способ использования Emotionjs — это использование css в качестве реквизита.

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

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

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

Вход в полноэкранный режим Выход из полноэкранного режима

Используя реквизит css, я смог отредактировать строку текста внутри div. Это позволяет вам напрямую редактировать стили внутри строк кода.

С помощью Emotionjs можно сделать гораздо больше, но я не буду рассказывать об этом в этом посте. Не стесняйтесь заглянуть в документацию по Emotionjs.