web-dev-qa-db-ja.com

material-ui JSでCSSを使用してスクロールバーのスタイルを設定するにはどうすればよいですか？

スクロールバーのスタイル設定に外部スタイルシートを用意する必要が本当にないので、残りのスタイルとともにルートコンポーネントに配置したいと考えています。私はこれを試しました...

const styles = (theme: Theme) =>
  createStyles({
    scrollBar: {
      '&::-webkit-scrollbar': {
        width: '0.4em'
      },
      '&::-webkit-scrollbar-track': {
        '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
      },
      '&::-webkit-scrollbar-thumb': {
        backgroundColor: 'rgba(0,0,0,.1)',
        outline: '1px solid slategrey'
      }
    }
  });

次に、クラスをルートコンポーネントdivに追加します。私はwithStyles HOCを使用していますが、他のスタイルが適用されているので、機能していることはわかりますが、スクロールバーのスタイルを取得する方法がわかりません。これを行う方法はありますか？

<div className={classes.scrollBar} />
reactjsmaterial-uijss
5
deltaskelta

特定のコンテナにのみスクロールバースタイルを適用することをお勧めします。@ Globalがすべての要素に適用されるまでにレンダリング時間がかかる場合があるためです。これは私にとってはうまくいきます

list: {
  overflowY: "auto",
  margin: 0,
  padding: 0,
  listStyle: "none",
  height: "100%",
  '&::-webkit-scrollbar': {
    width: '0.4em'
  },
  '&::-webkit-scrollbar-track': {
    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0,0,0,.1)',
    outline: '1px solid slategrey'
  }
}
1
Artem Luzhanovskyi

私にとってはスクロールバー設定をグローバルに変更したかったので、ここに提供されているサンプルに基づいて： typography-html-font-size

テーマを構築するには、次のような方法を使用できます。

createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '*': {
          'scrollbar-width': 'thin',
        },
        '*::-webkit-scrollbar': {
          width: '4px',
          height: '4px',
        }
      }
    }
  }
})

次に、作成したオブジェクトをThemeProviderに渡します。 ThemeProviderドキュメント

0
Naeem Baghi