组件首次渲染时如何设置按钮默认选中高亮颜色

问题背景 #

现有3个时间维度切换按钮，仅实现了按钮:active（点击瞬间）、:focus（获得焦点）状态下白字、深蓝色背景的高亮效果，需要支持组件首次加载时，默认选中的按钮自动展示高亮样式。

现有按钮代码：

<Button onClick={setChartDay}>Day</Button>
<Button onClick={setChartWeekly}>Week</Button>
<Button onClick={setChartMonth}>Month</Button>

现有样式代码（CSS-in-JS写法）：

'& button:active': {
    color: styles.color.white,
    backgroundColor: styles.color.darkBlue,
},
'& button:focus': {
    color: styles.color.white,
    backgroundColor: styles.color.darkBlue,
},

具体实现 #

纯靠CSS伪类无法实现初始默认选中效果——:active只在鼠标按下时触发，:focus只在元素获得焦点时触发，首次渲染时默认按钮既没有触发点击也没有自动获焦，自然不会应用高亮。需要通过「状态标记选中项+专属选中样式」的方式实现，步骤如下：

1. 定义选中状态变量，设置默认选中值
   比如默认选中「Day」维度，初始化状态值为day（React/Vue等框架逻辑通用，以下以React为例）：

const [activeTimeType, setActiveTimeType] = useState('day')

2. 改造按钮逻辑：点击时同步更新选中状态，给当前选中项绑定选中类名

<Button 
  onClick={() => {
    setChartDay()
    setActiveTimeType('day')
  }}
  className={activeTimeType === 'day' ? 'is-selected' : ''}
>
  Day
</Button>
<Button 
  onClick={() => {
    setChartWeekly()
    setActiveTimeType('week')
  }}
  className={activeTimeType === 'week' ? 'is-selected' : ''}
>
  Week
</Button>
<Button 
  onClick={() => {
    setChartMonth()
    setActiveTimeType('month')
  }}
  className={activeTimeType === 'month' ? 'is-selected' : ''}
>
  Month
</Button>

如果使用的是第三方组件库的Button组件，优先使用组件库自带的active/selected/variant等控制选中态的属性，不用手动加className，逻辑完全一致。
3. 调整样式，把高亮规则同步给选中类

'& button.is-selected, & button:active, & button:focus': {
    color: styles.color.white,
    backgroundColor: styles.color.darkBlue,
}

这样组件首次渲染时，状态初始值对应的按钮会自动加上is-selected类，直接应用高亮样式，点击切换时也能同步更新选中效果。

内容的提问来源于stack exchange，提问作者Viet Nguyen