라이브러리를 사용할때, 보통 class나 id는 지정되있기 마련이죠.
또한 이런 것을 수정해야하는 경우도 종종 생깁니다.
이때 css를 수정하는 방법을 알아보도록 하겠습니다.!
(next, styled-components 사용 방법입니다.)
첫번째 방법은 css 파일을 import하는 방법입니다.
즉 전체 페이지에 대한 스타일시트를 가져오는 방법입니다.
먼저 pages/ 폴더 하위에 _app.js 파일을 생성한 후 스타일시트를 import해주면 됩니다.
import '../styles.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}https://nextjs.org/docs/basic-features/built-in-css-support
Basic Features: Built-in CSS Support | Next.js
Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.
nextjs.org
두번째 방법은 글로벌 스타일을 만드는 것인데요.
첫번째 방법과는 달리 styled-components라이브러리를 사용하고 있어야합니다.
https://styled-components.com/docs/api#createglobalstyle
styled-components: API Reference
API Reference of styled-components
styled-components.com
createGlobalStyle를 import 한 뒤에
import styled, { createGlobalStyle } from 'styled-components';styled.div`` 가 아닌, createGlobalStyle로 작업을 하면 됩니다.
(.slick-slide는 라이브러리가 지정한 class이며 스타일 덮여씌우는 예시입니다.)
const Global = createGlobalStyle`
.slick-slide {
display: inline-block;
}
`;그리고 아무대나 컴포넌트 넣듯 <Global />로 넣으면 됩니다.
이때 간단히 설명하자면 styled.div`` 형식으로 만든 것은 로컬 스코프를 가지게되고,
createGlobalStyle``로 만든것은 글로벌 스코프를 가지게 된다고 합니다.
저는 작업 특성 상 pages/_app.js 파일을 만들었는데,
글로벌 스타일을 이곳에 넣어줬습니다.
pages/_app.js
import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { createGlobalStyle } from 'styled-components';
import 'antd/dist/antd.css';
import wrapper from '../store/configurestore';
const App = ({ Component }) => {
const Global = createGlobalStyle`
.hidden {
padding: 0;
margin: -1px;
position: absolute;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
overflow: hidden;
border: 0;
}
`;
return(
<>
<Head>
<meta charSet="utf-8" />
<title>App</title>
</Head>
<Global />
<Component />
</>
);
};
App.propTypes = {
Component: PropTypes.elementType.isRequired,
};
export function reportWebVitals(metric){
console.log(metric);
}
export default wrapper.withRedux(App);
세번째 방법은 중복되는 기본 스타일을 어떻게 사용할까? 입니다.
styled-components 라이브러리에서 css api를 제공합니다.
https://styled-components.com/docs/api#css
styled-components: API Reference
API Reference of styled-components
styled-components.com
이렇게 사용하면 됩니다.
import styled, { css } from 'styled-components';
const defaultStyle = css`
display: block;
// ...
`;
const CircleButton = styled.button`
${defaultStyled}
// ....
`;
const RectangleButton = styled.button`
${defaultStyled}
// ....
`;
이때 css를 넣지않고 백틱만으로도 작업이 되긴 합니다만 권고하지 않습니다.
문자열로 인식되어 원하지 않는 결과가 생길 수도 있다고 합니다.