reactでscrollbarのスタイルを変更してみる

Copy
/* スクロールバーのベース */
.samoleClass::-webkit-scrollbar {
  width: 10px;
}

Copy
.samoleClass::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

Copy
/* スクロールバーの動かすやつ */
.test::-webkit-scrollbar-thumb {
  background-color: #454a96aa;
  border-radius: 100px;
}

Copy
import "./styles.css";

export default function App() {
  return (
    <div>
      {/* css */}
      <h1>cssで定義</h1>
      <div className="oyaStyle test">
        <h2 className="childStyle">bbbb</h2>
        <h2 className="childStyle">bbbb</h2>
        <h2 className="childStyle">bbbb</h2>
        <h2 className="childStyle">bbbb</h2>
        <h2 className="childStyle">bbbb</h2>
        <h2 className="childStyle">bbbb</h2>
      </div>
    </div>
  );
}

Copy
.oyaStyle {
  height: 200px;
  overflow-y: scroll;
}

.childStyle {
  border: 1px solid black;
  text-align: center;
}

/* スクロールバーのベース */
.test::-webkit-scrollbar {
  width: 10px;
}
/* スクロールバーの下のやつ */
.test::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}
/* スクロールバーの動かすやつ */
.test::-webkit-scrollbar-thumb {
  background-color: #454a96aa;
  border-radius: 100px;
}

Copy
import styles from "./styles.module.css";

export default function App() {
  return (
    <div>
      {/* CSSmodule */}
      <h1>CSSmoduleで定義</h1>
      <div className={`${styles.oyaStyle} ${styles.test}`}>
        <h2 className={styles.childStyle}>aaaa</h2>
        <h2 className={styles.childStyle}>aaaa</h2>
        <h2 className={styles.childStyle}>aaaa</h2>
        <h2 className={styles.childStyle}>aaaa</h2>
        <h2 className={styles.childStyle}>aaaa</h2>
        <h2 className={styles.childStyle}>aaaa</h2>
        <h2 className={styles.childStyle}>aaaa</h2>
      </div>

    </div>
  );
}

Copy
.oyaStyle {
  height: 200px;
  overflow-y: scroll;
}

.childStyle {
  border: 1px solid black;
  text-align: center;
}

/* スクロールバーのベース */
.test::-webkit-scrollbar {
  width: 10px;
}
/* スクロールバーの下のやつ */
.test::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}
/* スクロールバーの動かすやつ */
.test::-webkit-scrollbar-thumb {
  background-color: #454a96aa;
  border-radius: 100px;
}

Copy
<div
            css={theme => [
              css`
                background-color: ${theme.background};
                box-shadow: 0 0.25rem 1.25rem ${theme.color};
                margin-top: 0px;
                height: 56vh;
                &::-webkit-scrollbar {
                  width: 10px;
                }
                &::-webkit-scrollbar-track {
                  background-color: #e4e4e4;
                  border-radius: 100px;
                }
                &::-webkit-scrollbar-thumb {
                  background-color: #454a96aa;
                  border-radius: 100px;
                }
              `,
              tw`rounded-b-lg overflow-hidden flex-col items-start overflow-y-auto`,
            ]}
          >
            <MdxIndex items={articleTags} />
          </div>

Copy
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import React from 'react';
import { Global, css } from '@emotion/react';
import Prism from 'prism-react-renderer/prism';
import { Login } from './src/components/Login';
import Layout from './src/layout_emotion';

(typeof global !== 'undefined' ? global : window).Prism = Prism; // gotta do this one otherwise it'll say Prism is not defined
require('prismjs/components/prism-java');

export const wrapPageElement = ({ element }) => {
  return (
    <Login>
      <Global
        styles={css`
          html,
          body {
            margin: 0px;
          }
          &::-webkit-scrollbar {
            width: 10px;
          }
          &::-webkit-scrollbar-track {
            background-color: #e4e4e4;
            border-radius: 100px;
          }
          &::-webkit-scrollbar-thumb {
            background-color: #454a96aa;
            border-radius: 100px;
          }
        `}
      />
      <Layout>{element}</Layout>
    </Login>
  );
};