How can I make inline styling more compact instead of using multiple variables?

user_15303921 0
Viewed 83

I am currently building a tab component and build inline variables for the CSS styling. This is for a streamlit app which allows me to make adjustments on the python end. Currently, I have about four elements that have CSS styling so I have four different style variables like the below:

const navStyle: React.CSSProperties = this.props.args['navStyle'] || {}
const tabStyle: React.CSSProperties = this.props.args['tabStyle'] || {}
const tabOptionsStyle = this.props.args['tabOptionsStyle'] || {}
const iconStyle: React.CSSProperties = this.props.args['iconStyle'] || {}

So instead of this (demonstrated in Typescript/React):

const navStyle: React.CSSProperties  = {
                                       backgroundColor:'#111',

                 }

const tabStyle: React.CSSProperties = {
                                      marginBottom:'30px'

                  }

const tabOptionsStyle = style({
                              ":hover": {color: '#f1f1f1',
                                        cursor: 'pointer'}
                        })     
     
const iconStyle: React.CSSProperties = {
                                      position:'fixed'

                  }

What I want is something like this (demonstrated in Typescript/React):

const style = {
             navStyle {

         }
             tabStyle {

         }
             tabOptionsStyle {

         }
             iconStyle {

         }

    }

How would I create variables that produce the latter instead of the former?

Note

  • tabOptionsStyle is styled using {style} from glamor.
streamlit typescript reactjs css
1 Answers

So I was able to solve this. Sorry guys, I am learning how to use Typescript, coming from python. Everything is all very intimidating and causes me to overthink. Anyway, the solution:

const styles: any = this.props.args['styles'] || {}

Then create key instances of the html elements that need to be updated and place these in their respective html elements style inline but using style from glamor as the styles variable is an any type so it won't necessarily capture all the nuances of CSSProperties.

<div classname="navStyle" {...styles['navStyle']}>
<div classname="tabStyle" {...styles['tabStyle']}>
<div classname="tabOptionsStyle" {...styles['tabOptionsStyle']}>
<div classname="iconStyle" {...styles['iconStyle']}>

Then in the python environment, execute like the below:

styles = {'navStyle': {'background-color':'#111',
                     'color': '#818181',
                     'font-size': '18px',
                     'transition': '.3s',
                     'white-space': 'nowrap',
                     'text-transform': 'uppercase'},
          'tabOptionsStyle': {':hover': {'color': '#f1f1f1',
                                         'cursor': 'pointer'}},
          'iconStyle':{'position':'fixed',
                       'left':'7.5px',
                       'text-align': 'left'},
          'tabStyle' : {'list-style-type': 'none',
                        'margin-bottom': '30px',
                        'padding-left': '30px'}}
user_153039210
Related