리액트에서 css이외에 스타일을 어떻게 넣어줄 수 있는지를
배운 섹션이다. 기존 프로젝트에 스타일을 손대기는 너무나도 큰 일이여서
배운 내용과 예시 코드를 간단하게 정리해보려한다.
+)섹션 7의 내용도 간단해서 하단에 짧게 정리해두려한다.
const activeStyle = {
backgroundColor: "#e0d3d3",
fontWeight: "bold",
border: "solid 3px #ac8888",
boxShadow:
"rgba(204, 185, 185, 0.15) 0px 50px 100px -20px, rgba(204, 185, 185, 0.3) 0px 30px 60px -30px, rgba(204, 185, 185, 0.35) 0px -2px 6px 0px inset",
};
{rowBtnType.map((x, index) => {
return (
<button
className={x.id}
id={`${x.id}${index + 1}`}
style={step === `${x.id}${index + 1}` ? activeStyle : {}}
onClick={e => {
selectStep(e.target.id);
}}
>
{x.type}
</button>
);
})}
<label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>
//formControl.js
return (
<div className={`form-control ${!isValid ? "invalid" : ""}`}>
<label>Course Goal</label>
<input type="text" />
</div>
);
//formControl.css
.form-control.invalid input {
border-color: red;
background: rgb(237, 209, 209);
}
.form-control.invalid label {
color: red;
}
클래스이름.이름
을 적용시켜주면 class='form-control invalid
로 인식한다.띄어쓰기 역할이라 생각하면 된다.npm install --save styled-components
import styled from 'styled-components';
cosnt 변수명 = styled.html태그` css 속성 `;
&
를 사용하면 됨.```js
const NextGuide = styled.p @keyframes blink-effect { 50% { color: #a27979; } } font-size: 0.75rem; text-align: center; margin-top: 2rem; color: #e8e0e0; animation: blink-effect 1.5s step-end infinite;
;- 예시2 : **동적으로 디자인 주기**
1. js에서 styled components에 props를 넣기
2. styled component를 정의할때 화살표 함수를 이용해서 스타일 설정하기
```js
const FormControl = styled.div`
margin: 0.5rem 0;
& label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
color: ${props => (props.invalid ? "red" : "black")};
}
& input {
display: block;
width: 100%;
border: 1px solid ${props => (props.invalid ? "red" : "#ccc")};
font: inherit;
line-height: 1.5rem;
padding: 0 0.25rem;
background: ${props => (props.invalid ? "#ffd7d7" : "transparent")};
}
`;
...
//일반 컴포넌트처럼 프롭스를 넘겨주면된다.
<FormControl invalid={!isValid}>
....
</FormControl>
```js
const Button = styled.button` @media (min-width: 768px) {
width: auto;
}
&:focus {
outline: none;
}
`;
- 미디어 쿼리 정리([여기](https://naradesign.github.io/media-query.html) 참고하기)
1. **min**-width:1025px
- 해상도가 1025px**이상** 일 때 이 코드가 실행됨.
2. **max**-width: 1025px
- 해상도가 1025px **이하** 일 때 이 코드가 실행됨
```jsx
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
/* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}
/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}
/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}
파일명.modlue.css
으로 바꾸기(따로 install 할 필요 없음)
//styles라는 이름으로 CSS 임포트
import styles from "./Button.module.css";
const Button = props => {
return (
//css에서 button을 클래스 이름으로 사용했으므로
//className에 styles.button을 넣어줌
<button type={props.type} className={styles.button} onClick={props.onClick}>
{props.children}
</button>
);
};
//Button.module.css
.button {
font: inherit;
padding: 0.5rem 1.5rem;
border: 1px solid #8b005d;
color: white;
background: #8b005d;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
cursor: pointer;
}
@media (min-width: 768px) {
.button {
width: auto;
}
}
return (
<form onSubmit={formSubmitHandler}>
<div
className={`${styles["form-control"]} ${!isValid && styles.invaild}`}
>
<label>Course Goal</label>
<input type="text" onChange={goalInputChangeHandler} />
</div>
<Button type="submit">Add Goal</Button>
</form>
);
//courseInput.module.css
.form-control {
margin: 0.5rem 0;
}
.form-control.invalid input {
border-color: red;
background: rgb(237, 209, 209);
}
.form-control.invalid label {
color: red;
}
리액트에서 디버깅 하는 방법
Components
를 누르면 컴포넌트의 정보를 볼 수 있다.(안보이면 >>
버튼을 눌러보자)