---
title: "styleable"
description: "Modifier that creates a region that is styled by the given [Style] object for the component this
Modifier is attached to.

Apply [styleable] to creates a \"styleable\" component whose looks can be customized using the
provided style. This should be called by a component that wishes to make itself styleable via a
`style: Style = Style` parameter. If a component already takes a [Style] parameter, then that
component internally is applying the [styleable], and that [Style] parameter should be used
instead of applying [styleable] again.

If [styleable] is added to a modifier chain that is after a another [styleable], then the second
region will wrap around the first. For example, if the two regions both supply padding then the
padding will the sum of both regions."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState? = null, style: Style): Modifier
```


Modifier that creates a region that is styled by the given `Style` object for the component this
Modifier is attached to.

Apply `styleable` to creates a "styleable" component whose looks can be customized using the
provided style. This should be called by a component that wishes to make itself styleable via a
`style: Style = Style` parameter. If a component already takes a `Style` parameter, then that
component internally is applying the `styleable`, and that `Style` parameter should be used
instead of applying `styleable` again.

If `styleable` is added to a modifier chain that is after a another `styleable`, then the second
region will wrap around the first. For example, if the two regions both supply padding then the
padding will the sum of both regions.

#### Parameters

| | |
| --- | --- |
| styleState | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |
| style | the style to apply to the styleable region. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState?, vararg styles: Style): Modifier
```


Modifier that creates a region that is styled by the given `Style` object for the component this
Modifier is attached to. Styles that are further "to the right", will have the properties they
set override set properties of Styles to the left of them.

Apply `styleable` to creates a "styleable" component whose looks can be customized using the
provided `style` together with one or more default `Style` objects. This should be called by a
component that wishes to make itself styleable via a `style: Style = Style` parameter. If a
component already takes a `Style` parameter, then that component internally is applying the
`styleable`, and that `Style` parameter should be used instead of applying `styleable` again,

If `styleable` is added to a modifier chain that is after a another `styleable`, then the second
region will wrap around the first. For example, if the two regions both supply padding then the
padding will the sum of both regions.

#### Parameters

| | |
| --- | --- |
| styleState | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |
| styles | the styles to apply, in order, to the stylable region. |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** StyleableWithNoStyles

```kotlin
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState?): Modifier
```


Modifier that creates a region that is styled by the given `Style` object for the component this
Modifier is attached to. Styles that are further "to the right", will have the properties they
set override set properties of Styles to the left of them.

Apply `styleable` to creates a "styleable" component whose looks can be customized using the
provided `style` together with one or more default `Style` objects. This should be called by a
component that wishes to make itself styleable via a `style: Style = Style` parameter. If a
component already takes a `Style` parameter, then that component internally is applying the
`styleable`, and that `Style` parameter should be used instead of applying `styleable` again,

If `styleable` is added to a modifier chain that is after a another `styleable`, then the second
region will wrap around the first. For example, if the two regions both supply padding then the
padding will the sum of both regions.

#### Parameters

| | |
| --- | --- |
| styleState | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |