Export Styled Components for custom built components matching BigDesign Style

[LordZardeck]

Is there a reason the styled components aren't exported? It would be nice to be able to utilize the styling already built in BigDesign for our own custom components. For example, I need a table with expandable and nested rows, and other custom functionality not possible with how the BigDesign table component is built. But with the styled components, I could create my own table using react-table and make it match the rest of the application

[chanceaclark]

Hey @LordZardeck, the reason we don't export styled-components (sc) along with BigDesign is to decrease the bundle size. We require it as a peerDependency so that consumers will need to install it locally.

You can and should be able to create custom components using our theme. Firstly, you'll need to wrap your app in a ThemeProvider and pass in our theme, like so:

// index.tsx
import { GlobalStyles } from '@bigcommerce/big-design';
import { theme } from '@bigcommerce/big-design-theme';
import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from 'styled-components';

import App from './App';

render(
  <ThemeProvider theme={theme}>
    <GlobalStyles />
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

Then you should be able to use our theme within a custom styled component.

// styled.tsx
import styled from 'styled-components';

export const StyledTable = styled.table`
  background-color: ${({ theme }) => theme.colors.primary};
  // other styles...
`