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

Question

[Hlib]

Грамотно ли так использовать 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>
  )

Comments

[Антон Спирин]

Проще описать в самом файле компонента.

Answer 1

[Сергей Сунцев]

С точки зрения проектированя я бы импортировал конкретные, нужные стили. Но возможно это дело удобства. Покуда я бывает не все стили использую в конкретных компонентах.

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>
  )

Comments

[Hlib]

А насчет самой верстки
Нужно ли отдельно стилизовать input, например?

[Сергей Сунцев]

Да, я бы все отдельно стилизовал, чтоб модульность поддерживать.
Тоже касается и h3, img и других тегов. Но конечно много ещё зависит от вашего дизайна, и есть ли у вас в фирме отпределенный набор стилей для повторяющихся элементов.