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

### CSS variables

React offcanvas uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

<ScssDocs file="_offcanvas.scss" capture="offcanvas-css-vars"/>

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-offcanvas-color': '#555',
  '--cui-offcanvas-bg': '#fff',
}

return <COffcanvas style={customVars}>{/* Offcanvas content */}</COffcanvas>
```

### SASS variables

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

