---
title: "CustomStyle"
description: "A base type for custom styles including Style itself."
type: "interface"
lastmod: "2026-05-20T01:13:53.362399Z"
---
## API Reference

> Source set: Common

```kotlin
@ExperimentalFoundationStyleApi
fun interface CustomStyle<ScopeT : CustomStyleScope>
```

A base type for custom styles including [Style](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Style) itself. [CustomStyle](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/CustomStyle) can be used to restrict
extension functions to a specific style as well as restrict the properties that are available to
a custom style.

## Functions

### applyStyle

```kotlin
fun ScopeT.applyStyle()
```

## Code Examples

### StyleStateKeySample
```kotlin
@Composable
fun StyleStateKeySample() {
    // 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) }
        },
    )
}
```