Skip to content

๐ŸŽจย ย Styleable Container

Submitted by Lukas Masuch

Summary

A container that allows to style its child elements using CSS. Note: the key argument in st.container gets added as class name to the container. This is the preferred way to apply CSS styles for specific elements in Streamlit.

Functions

stylable_container

Insert a container into your app which you can style using CSS. This is useful to style specific elements in your app.

Parameters:

Name Type Description Default
key str

The key associated with this container. This needs to be unique since all styles will be applied to the container with this key.

 required
css_styles str | List[str]

The CSS styles to apply to the container elements. This can be a single CSS block or a list of CSS blocks.

 required

Returns:

Name Type Description
DeltaGenerator 'DeltaGenerator'

A container object. Elements can be added to this container using either the 'with' notation or by calling methods directly on the returned object.
Source code in src/streamlit_extras/stylable_container/__init__.py 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
@extra
def stylable_container(key: str, css_styles: str | list[str]) -> "DeltaGenerator":
    """
    Insert a container into your app which you can style using CSS.
    This is useful to style specific elements in your app.

    Args:
        key (str): The key associated with this container. This needs to be unique since all styles will be
            applied to the container with this key.
        css_styles (str | List[str]): The CSS styles to apply to the container elements.
            This can be a single CSS block or a list of CSS blocks.

    Returns:
        DeltaGenerator: A container object. Elements can be added to this container using either the 'with'
            notation or by calling methods directly on the returned object.
    """

    class_name = re.sub(r"[^a-zA-Z0-9_-]", "-", key.strip())
    class_name = f"st-key-{class_name}"

    if isinstance(css_styles, str):
        css_styles = [css_styles]

    # Remove unneeded spacing that is added by the html:
    css_styles.append(
        """
> div:first-child {
margin-bottom: -1rem;
}
"""
    )

    style_text = """
<style>
"""

    for style in css_styles:
        style_text += f"""

.st-key-{class_name} {style}
"""

    style_text += """
    </style>
"""

    container = st.container(key=class_name)
    container.html(style_text)
    return container

Import:

from streamlit_extras.stylable_container import stylable_container # (1)!
  1. You should add this to the top of your .py file ๐Ÿ› 

Examples

example

def example():
    with stylable_container(
        key="green_button",
        css_styles="""
            button {
                background-color: green;
                color: white;
                border-radius: 20px;
            }
            """,
    ):
        st.button("Green button")

    st.button("Normal button")

    with stylable_container(
        key="container_with_border",
        css_styles="""
            {
                border: 1px solid rgba(49, 51, 63, 0.2);
                border-radius: 0.5rem;
                padding: calc(1em - 1px)
            }
            """,
    ):
        st.markdown("This is a container with a border.")