Is it smart to use styled components like this?

Question

React

Is it smart to use styled components like this?
Hello, I just recently started to study styled components in react and faced the fact that I can’t find a normal example on the Internet, only entry-level tutorials.
Am I breaking any patterns? Can the code be improved somehow?
Styled Components and the component itself, which I style, I split into different files (ps answer, do I need to split them, I'm also waiting)

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

I import it all with

import * as login from '../styledComponents/login.js'

Here is the component itself:

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

Answer 1

From a design standpoint, I would import the specific styles I want. But maybe it's a matter of convenience. While I sometimes do not use all styles in specific components.

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