streamlit 展示自定义 html 以及 css
目前探索出来的有效方法:
style = """
<style>
.memo-box {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.tag {
font-size: 12px;
color: #888;
}
</style>
"""
html = """
<div class="memo-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra mauris sit amet neque ullamcorper, sed rhoncus tortor dapibus. Fusce auctor nisi nec nisi rutrum, vitae rutrum lacus tincidunt.</p>
<span class="tag">#tag</span>
</div>
"""
st.components.v1.html(style + html)
style 和 html 要放在一起,如果分开的话,style 可能不会生效。
另外,对已有的元素样式修改,可以使用下面的方法,自己用开发者工具扒好对应的元素选择即可(注意生效范围是局部的,所以最好在对应的位置同级运行):
style = """<style> div[data-testid="stCaptionContainer"] p {margin-top: -16px;} </style>"""
st.markdown(style, unsafe_allow_html=True)
st.write("Hello")
st.caption("#tag1 #tag2")
参考链接:
discuss.streamlit.io/t/applying-custom-css-to-manually-created-containers/33428/2
Components API - Streamlit Docs