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