Apply Custom Metric Styling to only one section

Community Cloud
1

How can we apply the code below to only one section of metrics in 1 column. Currently it applies the same css to all the metrics on the page ?

import streamlit as st

st.markdown(
    '''
    <style>
    [data-testid="stMetricDelta"] svg {
        transform: rotate(180deg);
    }
    </style>
    ''',unsafe_allow_html=True)

cols = st.columns(2)
with cols[0]: st.metric("Positive metric", 100.0, 10)
with cols[1]: st.metric("Negative metric", 200.0, -10)
1 Like
2

If you wrap it in a st.containerwith an assigned key, you can use that key to target the CSS injection.

image
image1358×380 23.5 KB

import streamlit as st

st.html(
    """
    <style>
    div.st-key-my_style [data-testid="stMetricDelta"] svg {
        transform: rotate(180deg);
    }
    </style>
    """
)

lcol, rcol = st.columns(2)

with lcol:
    st.header("Styled")
    with st.container(key="my_style"):
        st.metric("Positive metric", 100.0, 10)

with rcol:
    st.header("Default")
    st.metric("Negative metric", 200.0, -10)
3 Likes
3

Thanks mate this was easy - should be part of the st.metric documentation so that others dont have dig this info.

4

Yes the documentation lacks all these customizations and one has to dig in the forums.