Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements that require CSS styling, resulting in the creation of four distinct style variables as shown 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'] || {}
Instead of the current setup (demonstrated using Typescript/React), I aim to achieve something like the following:
const style = {
navStyle {
}
tabStyle {
}
tabOptionsStyle {
}
iconStyle {
}
}
My question is how can I create variables that lead to the latter outcome rather than the former?
Important Note:
- The styling of tabOptionsStyle utilizes {style} from glamor.