Skip to content

🎨  Styleable Container

Submitted by Lukas Masuch

Summary

A container that allows to style its child elements using CSS.

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 
13
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
@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.
    """
    if isinstance(css_styles, str):
        css_styles = [css_styles]

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

    style_text = """
<style>
"""

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

div[data-testid="stVerticalBlock"]:has(> div.element-container > div.stMarkdown > div[data-testid="stMarkdownContainer"] > p > span.{key}) {style}

"""

    style_text += f"""
    </style>

<span class="{key}"></span>
"""

    container = st.container()
    container.markdown(style_text, unsafe_allow_html=True)
    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.")
Output (beta)