在Kotlin与React技术栈中，如何实现margin:auto、百分比样式及@media媒体查询？

Great question! When working with Kotlin and React, you've got a couple of solid approaches to handle these styling needs—especially if you're leveraging the kotlin-css and kotlin-styled libraries, which are the standard for type-safe styling in the Kotlin React ecosystem. Let's break this down step by step:

You can handle this either with quick inline styles or with the more robust type-safe API from kotlin-css.

Inline Styles (Quick & Straightforward) #

For one-off styles, you can directly assign string values to style properties, just like you would in vanilla React:

div {
    style {
        // Use string values matching CSS syntax
        margin = "auto"
        padding = "5%"
        // Target specific sides if needed
        marginTop = "2%"
        marginLeft = "auto"
        marginRight = "auto"
    }
    +"Centered content with percentage padding"
}

Type-Safe Styling (Recommended) #

If you want compile-time checks to avoid typos or invalid values, use the kotlin-css library's built-in types and extensions. This lets you use enums like Auto and typed units like percent:

// Ensure you've added kotlin-css and kotlin-styled to your project dependencies
val StyledCard = styledDiv {
    css {
        // Use the Auto enum for auto-alignment values
        margin(horizontal = Auto) // Equivalent to margin-left: auto; margin-right: auto;
        // Use percentage units via the .percent extension
        padding(all = 5.percent)
        // Target individual sides with typed values
        padding(top = 2.percent, bottom = 2.percent)
    }
}

// Use the styled component in your UI
StyledCard {
    +"Type-safe styled content"
}

Media queries work seamlessly with kotlin-styled for static responsive styles, or you can use the useMediaQuery hook for dynamic, state-based adjustments.

Static Media Queries with kotlin-styled #

Define responsive styles directly in your styled component using the media function, which accepts breakpoints like maxWidth or minWidth:

val ResponsiveContainer = styledDiv {
    css {
        // Base styles for all screen sizes
        width = 100.percent
        padding = 16.px
        backgroundColor = Color.lightGray

        // Styles for screens smaller than 768px (mobile)
        media(maxWidth = 768.px) {
            width = 90.percent
            padding = 8.px
            margin = Auto.auto // Center the container on mobile
        }

        // Styles for screens larger than 1200px (desktop)
        media(minWidth = 1200.px) {
            width = 800.px
            margin = Auto.auto // Center the container on desktop
            backgroundColor = Color.white
        }
    }
}

// Use the responsive component
ResponsiveContainer {
    +"Content that adapts to screen size"
}

Dynamic Media Queries with useMediaQuery #

If you need to adjust component logic or styles dynamically based on screen size, use the useMediaQuery hook (available in Kotlin React bindings):

fun ResponsiveComponent() = FC {
    // Check if the screen is mobile (<=768px)
    val isMobile = useMediaQuery("(max-width: 768px)")

    div {
        style {
            width = if (isMobile) 90.percent else 100.percent
            padding = if (isMobile) 8.px else 16.px
        }
        +"Dynamic content: ${if (isMobile) "Mobile view" else "Desktop view"}"
    }
}

This hook returns a boolean that you can use to conditionally set styles, render different components, or adjust business logic based on the user's screen size.

内容的提问来源于stack exchange，提问作者ar rr