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

Question

我目前正在构建一个选项卡组件，并为CSS样式构建内联变量。这是一个流光应用程序，它允许我在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使用来自glamor的{style}进行样式化。

Answer 1

所以我能够解决这个问题。对不起，伙计们，我正在学习如何使用Typescript，来自python。每件事都很吓人，让我想得太多。总之，解决方案是:

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

然后创建需要更新的html元素的关键实例，并将它们放置在各自的html元素style inline中，但是使用style from glamor作为样式变量是任意类型的，因此它不一定能捕捉到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'}}