How to implement css style in streamlit

Using Streamlit
,
1

Am trying to pass this css style

  <style>
          .my_css{
          background:#ddd;color:black;
          }
          .my_css:hover{
          background:orange;
          color:black;
          }
    </style>

as can be showed in the code below


name ='freeboy'

html_string = f'''
    
    <div id="res" class='my_css'></div>
    <script language="javascript">
         let mystr  = '{name}';
         document.querySelector("#mystr").innerHTML = mystr;
          alert(mystr)
    </script>
    <style>
          .my_css{
          background:#ddd;color:black;
          }
          .my_css:hover{
          background:orange;
          color:black;
          }
    </style>
    '''
components.html(html_string)

Here is the error is throwed: NameError: name ‘background’ is not defined

Please how do I resolve this issue

2

Curly braces are used as field delimiters in f-strings. If you want an actual curly brace in the result, use two curly braces.

.my_css{{
background:#ddd;color:black;
}}
1 Like
3

Thanks alot Sir

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.