如何使内联样式更紧凑而不是使用多个变量？

Question

我目前正在构建一个选项卡组件并为 CSS 样式构建内联变量。这是一个 streamlit 应用程序，它允许我在 python 端进行调整。目前，我有大约四个具有 CSS 样式的元素，因此我有四个不同的样式变量，如下所示：

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'] || {}

所以不是这个（在 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'

                  }

我想要的是这样的（在Typescript/React中演示）：

const style = {
             navStyle {

         }
             tabStyle {

         }
             tabOptionsStyle {

         }
             iconStyle {

         }

    }

我如何创建产生后者而不是前者的变量？

备注

tabOptionsStyle 的样式使用来自 glamour 的 {style}。

Answer 1

所以我能够解决这个问题。抱歉各位，我正在学习如何使用 Typescript，来自 python。一切都非常令人生畏，让我想得太多。无论如何，解决方案：

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

然后创建需要更新的 html 元素的关键实例，并将它们放置在各自的 html 元素样式内联中，但使用来自 glamour 的样式，因为样式变量是任何类型所以它不一定会捕捉到 CSSProperties 的所有细微差别。

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

然后在python环境下，执行如下：

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'}}

如何使内联样式更紧凑而不是使用多个变量？

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

css

typescript

reactjs

streamlit