# CustomStyleScope

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/CustomStyle.kt+class:androidx.compose.foundation.style.CustomStyleScope) Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.12.0) Common/All
- Cmn

  ```
  @ExperimentalFoundationStyleApi
  @StyleScopeMarker
  interface CustomStyleScope : Density, CompositionLocalAccessorScope, StylePropertyProviderScope
  ```
Known direct subclasses [CommonStyleScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyleScope), [StyleScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyleScope` | A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyleScope` is the scope used by a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle`. |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` | A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` is the receiver scope of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` lambda. |

*** ** * ** ***

An interface that is the base interface for all styles scopes.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope` is a constraint on the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle`'s `ScopeT` parameter which is the receiver scope of the style. At minimum all style scopes used as `ScopeT` must implement `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope` typically by delegation to a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` received in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` lambda.

By default, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope` does not include `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/AnimateStyleScope` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateScope` which should be added for these features to be usable in the corresponding `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` type. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyleScope` can be used instead which includes both.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.CustomStyle
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.state
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

// Create a new StyleStateKey
val playingStateKey = StyleStateKey(false)

// In the module scope are the following declarations:
//
//    // A custom style scope which has all the properties of StyleScope
//    interface MediaPlayerStyleScope : StyleScope
//
//    // A custom style type
//    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
//        companion object : MediaPlayerStyle {
//            override fun MediaPlayerStyleScope.applyStyle() { }
//        }
//    }

// Introduce a function to convert the custom style to a Style
fun MediaPlayerStyle.toStyle(): Style = Style {
    val scope = object : StyleScope by this, MediaPlayerStyleScope {}
    with(scope) { applyStyle() }
}

// Introduce an extension function to read the style state. This will only be
// available in a MediaPlayerStyle.
fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
    state(playingStateKey, block)
}

// The MediaPlayer composable
@Suppress("UNUSED_PARAMETER")
@Composable
fun MediaPlayer(
    url: String,
    modifier: Modifier = Modifier,
    style: MediaPlayerStyle = MediaPlayerStyle,
    playing: Boolean = true,
) {
    val styleState =
        rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
    Box(modifier = modifier.styleable(styleState, style.toStyle())) {
        // Implementation of the media player
    }
}

// Using the style in a composable that sets the state.
MediaPlayer(
    url = "https://example.com/media/video",
    style = {
        borderColor(Color.Gray)

        // This only sets the border color to green when the media player is playing
        playerPlaying { borderColor(Color.Green) }
    },
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyleScope` |   |

## Summary

| ### Extension functions |
|---|---|---|
| `inline https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi <ScopeT : https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope, StyleT : https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle<ScopeT>> ScopeT.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope#(androidx.compose.foundation.style.CustomStyleScope).apply(androidx.compose.foundation.style.CustomStyle)( style: StyleT )` Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.CustomStyleScope).apply(androidx.compose.foundation.style.CustomStyle)` to the current `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope`. | Cmn |

### Inherited functions

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).roundToPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).roundToPx()()`

Convert Sp to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toDp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toDp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Dp
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.geometry.Size).toDpSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize`.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).toPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to pixels.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).toPx()()`

Convert Sp to pixels.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpRect).toRect()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpSize).toSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toSp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to Sp.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toSp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Sp
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.TextUnit).toDp()()`

Convert Sp to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.Dp).toSp()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to Sp.
Cmn From [androidx.compose.foundation.style.StylePropertyProviderScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StylePropertyProviderScope) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ProvidableStyleProperty<T>.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StylePropertyProviderScope#(androidx.compose.foundation.style.ProvidableStyleProperty).provide(kotlin.Any)(value: T)`

Sets or updates the value of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ProvidableStyleProperty`.
Cmn

### Inherited properties

From [androidx.compose.runtime.CompositionLocalAccessorScope](https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocalAccessorScope) `T` `https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocal<T>.https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocalAccessorScope#(androidx.compose.runtime.CompositionLocal).currentValue()`

An extension property that allows accessing the current value of a composition local in the context of this scope.
Cmn From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#density()`

The logical density of the display.
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#fontScale()`

Current user preference for the scaling factor for fonts.
Cmn

## Extension functions

### ScopeT.apply

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/StyleScope.kt+function:apply)

```
@ExperimentalFoundationStyleApi
inline fun <ScopeT : CustomStyleScope, StyleT : CustomStyle<ScopeT>> ScopeT.apply(
    style: StyleT
): Unit
```

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.CustomStyleScope).apply(androidx.compose.foundation.style.CustomStyle)` to the current `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope`. Applying the scope calls the scope applies any properties set in the scope directly.

| Parameters |
|---|---|
| `style: StyleT` | the style to apply. |