# Style

Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Style.kt+class:androidx.compose.foundation.style.Style) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Common/All
- Cmn

  ```
  @ExperimentalFoundationStyleApi
  fun interface Style : CustomStyle<StyleScope>
  ```
Known direct subclasses [Style.Companion](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style.Companion)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style.Companion` |   |

*** ** * ** ***

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

Style represents an opaque type which encodes a description of how to style a node in compose. It is implemented semantically like a lambda which is executed on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope`.

These Style objects allow for styles to be defined similarly to a chain of Modifiers, however these Styles are applied by passing them into a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleResolver)` Modifier, or by passing them into an appropriately defined Style parameter of a Composable function.

The primary benefits of Style objects are:

1. They define their own observation scope, meaning you can read `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-state/index.html` objects inside of them without risking recomposition. Properties that are changed as a result of the State changing will cause only the minimal invalidation possible (ie, changing `background` will only cause a redraw)

2. CompositionLocals can be read inside of them. This allows for many theme-based values to be used in their definition without adding to the capture scope of the lambda.

3. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` interface allows for state-based styling to be defined such as "pressed" states or "hover" states or "focus" states.

4. Transition-based animations of style properties can be done automatically without defining any animated values by leveraging the animate API.

This type will be removed before style becomes stable. It is not yet deprecated to facilitate removing code that was written using the experimental 1.11 version of this API.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.size
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Create a styleable box
@Composable
fun StyleableBox(modifier: Modifier = Modifier, style: Style = Style) {
    Box(modifier = modifier.styleable(null, style))
}

// Style the styleable box to be a 150x150 green box
StyleableBox(
    style = {
        background(Color.Green)
        size(150.dp)
    }
)
```

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.animate
import androidx.compose.foundation.style.disabled
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.size
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Create a styleable clickable box
@Composable
fun ClickableStyleableBox(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: Style = Style,
    enabled: Boolean = true,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource) { it.isEnabled = enabled }
    Box(
        modifier =
            modifier
                .clickable(interactionSource = interactionSource, onClick = onClick)
                .styleable(styleState, style)
    )
}

ClickableStyleableBox(
    onClick = {},
    style = {
        background(Color.Blue)
        size(150.dp)
        hovered { animate { background(Color.Yellow) } }
        pressed { animate { background(Color.Red) } }
        disabled { animate { background(Color.Gray) } }
    },
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleResolver)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |

## Summary

| ### Nested types |
|---|
| `object https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style.Companion : https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |

| ### Public companion functions |
|---|---|---|
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style#(androidx.compose.foundation.style.StyleScope).applyStyle()()` The single abstract method used to invoke the lambda. | Cmn |

| ### Extension functions |
|---|---|---|
| `infix https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style#(androidx.compose.foundation.style.Style).then(androidx.compose.foundation.style.Style)(other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style#(androidx.compose.foundation.style.Style).toCommonStyle()()` Transitionary modifier. | Cmn |

### Inherited functions

From [androidx.compose.foundation.style.CustomStyle](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle#(androidx.compose.foundation.style.CustomStyleScope).applyStyle()()`

The single abstract method used to invoke the lambda.
Cmn

## Public companion functions

### StyleScope.applyStyle

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Style.kt+function:applyStyle)

```
open fun StyleScope.applyStyle(): Unit
```

The single abstract method used to invoke the lambda. The lambda has `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` as its receiver (i.e.`this`) type.

## Extension functions

### Style.then

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Style.kt+function:then)

```
@ExperimentalFoundationStyleApi
infix fun Style.then(other: Style): Style
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

Merges this styles with another. The style to the right on the `then` will overwrite the properties set by the style to the left.

| Parameters |
|---|---|
| `other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | the style to merge into the receiver. |

### Style.toCommonStyle

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Style.kt+function:toCommonStyle)

```
@ExperimentalFoundationStyleApi
fun Style.toCommonStyle(): CommonStyle
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` into a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle` for use by the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver`.

This function will be removed before style becomes stable. It is not yet deprecated to facilitate removing code that was written using the experimental 1.11 version of this API.