Задать вопрос
@Mysianio
вайти в айти

Грамотно ли так использовать styled components?

Грамотно ли так использовать styled components?
Здравствуйте, только недавно начал изучать styled components в react и столкнулся с тем, что не могу найти нормальный пример в интернете, одни обучалки начального уровня.

Нарушаю ли я какие-то паттерны? Можно ли как-то улучшить код?

Styled Components и сам компонент, который стилизую разбил на разные файлы (p.s. ответ, нужно ли их разбивать я тоже жду)

import styled from 'styled-components';

export const LoginWrap = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`
export const Login = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 450px;
  width: 300px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  img{
    width: 150px;
  }
  h3{
    margin-top: 10px;
    font-size: 40px;
  }
  span{
    color: tomato;
    font-size: 12px;
  }
  > input{
    margin-top: 30px;
    width: 220px;
    height: 40px;
    border: 0 solid #fff;
    background-color: #323433;
    color: #fff;
    border: 1px solid #323433;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 15px;
    border-radius: 5px;
    transition: .2s;
    &:focus{
      outline: none;
    }
    &:hover{
      background: #fff;
      color: #323433;
    }
  }
`
export const DataInput = styled.div`
  margin-top: 20px;
  font-size: 40px;
  input{
    display: flex;
    justify-content: center;
    width:225px;
    height:40px;
    margin-bottom: 20px;
    border: 0px solid #fff;
    background: #e7e7e7;
    padding-left: 20px;
    border-radius: 5px;
    &:focus{
      outline: none;
    }
  }
`


Импортирую все это с помощью
import * as login from '../styledComponents/login.js'


Вот сам компонент:
return(
    <login.LoginWrap>
      <login.Login>
          <img src={logo} alt='logo'/>
          <h3>Login</h3>
        <login.DataInput>
          <input placeholder='Login' ref={loginInput}/>
          <input placeholder='Password' type='password' ref={passInput}/>
        </login.DataInput>
        <span>{loginError} &#160;</span>
        <input type='submit' value='Login' onClick={onLogin}/>
      </login.Login>
    </login.LoginWrap>
  )
  • Вопрос задан
  • 109 просмотров
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
GreyCrew
@GreyCrew
Full-stack developer
С точки зрения проектированя я бы импортировал конкретные, нужные стили. Но возможно это дело удобства. Покуда я бывает не все стили использую в конкретных компонентах.
import {Login, LoginWrap, DataInput} from '../styledComponents/login.js'


return(
    <LoginWrap>
      <Login>
          <img src={logo} alt='logo'/>
          <h3>Login</h3>
        <DataInput>
          <input placeholder='Login' ref={loginInput}/>
          <input placeholder='Password' type='password' ref={passInput}/>
        </DataInput>
        <span>{loginError} &#160;</span>
        <input type='submit' value='Login' onClick={onLogin}/>
      </Login>
    </LoginWrap>
  )
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы