반응형
리액트 react-nomalize 적용하기
react-nomalize
styled-components
nomalize를 적용하기 위해서 위해 설치를 한다.
세팅을 편하게 하기 위해 두가지 패키지를 설치한다.
✗ npm install --save styled-normalize styled-components
/src/assets/styles/global-styles.ts
import styled,{createGlobalStyle, css, keyframes } from 'styled-components';
import { normalize } from 'styled-normalize'
export const GlobalStyle = createGlobalStyle`
${normalize}
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
`
아래의 코드 index.tsx를 아래처럼
/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { GlobalStyle } from 'src/assets/styles/global-styles';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
<App />
</React.StrictMode>,
document.getElementById('root'),
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
설정을 해놓는다.
개인적으로 사용하기 좋을 것 같은게, 설정도 그렇고 reset css 와 styled-components 도 그렇고 꽤 쓰기 좋을 것 같다.
반응형
'notion > npm package' 카테고리의 다른 글
react-app-rewired 와 customize-cra를 사용하여 CRA eject 안하고 babel 설정하기. (0) | 2021.03.16 |
---|---|
react styled-components 와 react-nomalize 적용하는 법 (0) | 2021.02.22 |
mockserver 를 이용해 mock서버 만들기[4] (0) | 2021.02.06 |
mockserver 를 이용해 mock서버 만들기[3] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[2] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[1] (1) | 2021.02.02 |
댓글0