---
name: StyleProvider
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import StyleProvider from './StyleProvider'
import cactusTheme from '@repay/cactus-theme'

# StyleProvider

The `StyleProvider` is a wrapper for `styled-components`' `ThemeProvider` component which gives you the option to include some global styles.

# Best practices

- Make sure that any components from `@repay/cactus-web` are children of `StyleProvider`. This will ensure that each component has the correct styles.

## Basic usage

```jsx
import React from 'react'
import { StyleProvider } from '@repay/cactus-web'
import cactusTheme from '@repay/cactus-theme'

const App = () => {
  return (
    <StyleProvider theme={cactusTheme} global={true}>
      // Include routes/rest of application here
    </StyleProvider>
  )
}
```

# Breakpoints

The `StyleProvider` has a media queries scale which is based on the provided breaking points and is added to the given theme. The media queries have screen sizes small, medium, large, and extraLarge. The set media queries will be larger than the default, for a mobile first approach.

Props can also vary depending on the current media query. This is done by setting a prop to an array, where the array holds different values for each media query size. The first element of the array maps to the default screen size, and each element after maps to the set media queries from smallest to largest. This is used below in the example code to set the background color.

For more information on Breakpoints and Media Queries visit: https://styled-system.com/theme-specification#breakpoints

## Media Queries Usage

```jsx
import React from 'react'
import { StyleProvider, Box } from '.@repay/cactus-web'
import styled from 'styled-components'

const BreakpointBox = styled(Box)`
  border-radius: 15%;

  ${p => p.theme.mediaQueries.small} {
    border-radius: 25%;
  }
  ${p => p.theme.mediaQueries.medium} {
    border-radius: 35%;
  }
  ${p => p.theme.mediaQueries.large} {
    border-radius: 45%;
  }
  ${p => p.theme.mediaQueries.extraLarge} {
    border-radius: 50%;
  }
`
const backgroundColors = ['springgreen', 'mediumturquoise', 'cornflowerblue', 'thistle', 'pink']

const App = () => {
  return (
    <StyleProvider theme={cactusTheme} global={true}>
      <BreakpointBox backgroundColor={backgroundColors} width="100px" height="100px" />
    </StyleProvider>
  )
}
```

# Properties

<PropsTable of={StyleProvider} staticProp="StyleProvider" />