[ 4 ] [ 실습 ] CSS-IN-JS 실습 (emotion)

 

다음의 그림을 기존의 CSS 방법, CSS-IN-JS 방법으로 각 각 만들어 보세요.

 

CSS-IN-JS 방법

 

아이디, 비밀번호 글씨를 재활용하고, 아이디 비밀번호를 입력하는 박스를 재활용하기로 했다

 

 

내 코드와 결과

내가 작성한 코드

 

// css-in-js 코드

import styled from "@emotion/styled";

export const LoginContainer = styled.div`
    height: 400px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid violet;
`

export const LoginName = styled.h1`
    width: 100px;
    margin: auto;
    margin-top: 50px;
`

export const InputName = styled.span`
    font-size: 20px;
    display: block;
    margin-left : 50px;
`
export const InputBox = styled.div`
    border: 1px solid gray;
    border-radius: 5px;
    width: 400px;
    height: 50px;
    margin: auto;
    margin-bottom: 20px;
`

 

// 리액트 컴포넌트 코드

import { LoginContainer, LoginName , InputBox,InputName } from "../../styles/01-02"
export default function Login(){
    
    
    
    return(
        <div>
        <LoginContainer>
            <LoginName>Login</LoginName>
            <InputName>아이디</InputName>
            <InputBox></InputBox>
            <InputName>비밀번호</InputName>
            <InputBox></InputBox>
        </LoginContainer>
        </div>
    )
}

만들다가 발생한 에러 

[ 에러 ] [ 리액트 ] incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

 

모범답안

 

// CSS 방법
function Home(){
	return (
		<div className={styles.wrapper}>
			<h1>로그인</h1>
			<label className={styles.label}>아이디</label>
			<input className={styles.input} type="text" />
			<label className={styles.label}>비밀번호</label>
			<input className={styles.input} type="password" />
		</div>
	)
}



// CSS-IN-JS 방법
function Home(){
	return (
		<Wrapper>
			<Title>로그인</Title>
			<Label>아이디</Label>
			<ID type="text" />
			<Label>비밀번호</Label>
			<Password type="password" />
		</Wrapper>
	)
}