---
title: React Toast Component Styling
name: Toast Styling
description: Learn how to customize the React Toast component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
route: /components/toast/
---

### CSS variables

React Toast supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

<ScssDocs file="_toasts.scss" capture="toast-css-vars"/>

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-toast-spacing': '2rem',
  '--cui-toast-color': '#f2f3f4',
}

return <CToast style={customVars}>{/* Toast content */}</CToast>
```

### SASS variables

<ScssDocs file="_variables.scss" capture="toast-variables"/>
