Next.js styled-jsx 사용법

import css from "styled-jsx/css";
import { NextPage } from 'next'

interface Props {
    data: object
}

const Table:NextPage<Props> = (data) => {

    const style = css` // 스타일 객체 생성
        .table_wrap {
            width: 100%;
            max-width: 800px;
            height: auto;
            max-height: 500px;
            overflow-y: auto;
            margin-bottom: 50px;
        }
        .table_wrap::-webkit-scrollbar {
          width: 8px;
        }
        .table_wrap::-webkit-scrollbar-thumb {
          background-color: #dee2e6;
          border-radius: 20px;
        }
        .table_wrap::-webkit-scrollbar-track {
          background-color: #f8f9fa;
          border-radius: 20px;
        }
        table {
            min-width: 600px;
            width: 99%;
            border-collapse: collapse;
            text-align: center;
        }
        thead {
            font-weight: bold;
            border-top: 1px solid #dee2e6;
        }
        thead, tr:last-child td {
            border-bottom: 1px solid #dee2e6;
        }
        th, td {
            padding: 15px 0;
        }
        td {
            border-bottom: 1px solid #f1f3f5;
            font-size: 0.95rem;
            font-weight: bold;
            line-height: 1.5rem;
        }
        td:nth-child(1) {
            color: var(--ct-blue);
            vertical-align: middle;
        }
    `;

    return (
        <div className="table_wrap">
            <table>
                <colgroup>
                    <col width="40%"></col>
                    <col width="60%"></col>
                </colgroup>
                <thead>
                    <tr>
                        <th>Class</th>
                        <th>Properties</th>
                    </tr>
                </thead>
                <tbody>
                    {Object.entries(data.data.classname).map(([key, classname], idx) => {
                        return (
                            <tr key={key}>
                                <td>{classname}</td>
                                <td 
                                    dangerouslySetInnerHTML={{__html:data.data.properties[idx]}}>
                                </td>
                            </tr>
                        )
                    
                    })}
                </tbody>
            </table>
            <style jsx>{style}</style> // 넣어주기
        </div>
    )
}

export default Table;

 

또는 아래와 같이 사용 가능하다.

<style jsx>{`
    .example {
    	color: red;
    }
`}</style>

 

다른 컴포넌트들에도 style 적용되도록

즉 전역으로 사용하려면

<style jsx global>{`
    .example {
    	color: red;
    }
`}</style>

 

찾아보니까 동적으로 스타일 바인딩하는 법도 있는데

만약 사용해야하는 상황이 생기면 아래 사이트를 참고할 것

https://velog.io/@dasu/Next.js-styled-jsx-%EB%A1%9C-component-style-%EC%A0%81%EC%9A%A9

 

 

 

https://nextjs.org/blog/styling-next-with-styled-jsx