GlobalStyles

Purpose

The purpose of @wedgekit/global-styles is to give all consuming apps consistent styling. (eg., a consistent scroll bar for both Windows and Mac users).

Usage

Consumers must import the global-styles package and place the component at the top of their React tree.

import styled from 'styled-components';

import { GlobalScrollbar } from '@wedgekit/global-styles';

const OverflowDiv = styled.div`
  height: 100px;
  overflow: auto;
`;

const Example = () => {
  return (
    <>
      <GlobalScrollbar />
      <OverflowDiv>
        <h1>Scroll to read the overflow content!</h1>
        <h2>The scrollbar is standardized</h2>
        <h3>Isn't that special</h3>
      </OverflowDiv>
    </>
  );
};

render(<Example />);

Styled Components

GlobalScrollbar

GlobalScrollbar is currently the only export from @wedgekit/global-styles and gives an application a consistent scrollbar for all users. However, support is non-standard and some users may face incompatibilities (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar).