# CustomStyle

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

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

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle` is the style all style types must be converted to be resolved by the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver`. |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | Transitionary modifier. |

Known indirect subclasses [CommonStyle.Companion](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle.Companion), [Style.Companion](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style.Companion)

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

*** ** * ** ***

A base type for custom styles including `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle`. A design system is expected to have multiple style types that each derive from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle`, one that is used by most components in the system, and a set of component specific style types. These types allow the style types to only surface the properties, states, and subcomponents a design system, and its components, supports. These members are accessed through the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope`, the class passed as the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` parameter, that is created at the same time. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyleScope` has custom extension functions (such a `background`, `minSize`, etc.) that set the design system defined `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleProperty`.

To be resolved by a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` must be converted to a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CommonStyle` first. A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` is expected to implement a `toCommonStyle()` extension function that implements a boilerplate conversion. See the sample for an example of how this is done.

```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/CommonStyle` |   |

## Summary

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `ScopeT.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 functions

### ScopeT.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/CustomStyle.kt+function:applyStyle) Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.12.0)

```
fun ScopeT.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.