import { Notification, KIND } from "baseui/notification";

import Example from "../../components/example";
import Layout from "../../components/layout";

import StyledBasic from "examples/styled/basic.tsx";

export default Layout;

# Styled

<Notification
  overrides={{ Body: { style: { width: "auto" } } }}
  kind={KIND.warning}
>
  We recommend using the <a href="/components/use-styletron">useStyletron</a>{" "}
  hook to apply css styles to your html elements. It allows for simpler patterns
  where not only elements can be reused, but the also the css definitions. See
  the 'useStyletron' page for additional styletron-related information.
</Notification>

Base Web exports a modified version of [Styletron's](https://www.styletron.org/api-reference#styled) `styled` function.
This modified version has access to [theme variables](/guides/theming/#theme-properties):

## Examples

<Example title="Using theme values" path="styled/basic.tsx">
  <StyledBasic />
</Example>