Change metric color, font, background and style

Using Streamlit
6

A new version will change the dynamically generated CSS classes.
Generally CSS classes that start with st or div attributes are considered a bit more stable because they are manually implemented. They may change on a version where the devs decide to change style guide, though this shouldn’t happen often.

import streamlit as st

st.markdown("""
<style>
div[data-testid="metric-container"] {
   background-color: rgba(28, 131, 225, 0.1);
   border: 1px solid rgba(28, 131, 225, 0.1);
   padding: 5% 5% 5% 10%;
   border-radius: 5px;
   color: rgb(30, 103, 119);
   overflow-wrap: break-word;
}

/* breakline for metric text         */
div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div {
   overflow-wrap: break-word;
   white-space: break-spaces;
   color: red;
}
</style>
"""
, unsafe_allow_html=True)

st.metric(label="This is a very very very very very long sentence", value="70 °F")

Have a nice day!
Fanilo

4 Likes