使用styled-components定制Progress Bar样式时仅appearance生效问题排查

问题描述 #

编写了React+styled-components进度条组件后，仅appearance: none;样式生效，其余样式（如高度、圆角、背景色）均不生效，代码如下：

import styled from 'styled-components';

type ProgressBarProps = {
    value: number;
    max?: number;
    color?: string;
    width?: string;
}

type ContainerProps = {
    color?: string;
    width?: string;
}

const Container = styled.div<ContainerProps>`
    progress[value] {
        margin-right: 8px;
        width: ${props => props.width};
        -webkit-appearance: none;
        appearance: none;

    
        &::webkit-progress-bar {
            height: 10px;
            border-radius: 20px;
            background-color: #eee;
        }
    
        &::webkit-progress-value {
            height: 10px;
            border-radius: 20px;
            background-color: ${props => props.color};
        }
    }
`


const ProgressBar = ({ value, color, max = 100, width="250px" }: ProgressBarProps) => {
    return (
        <Container color={color} width={width}>
            <progress value={value} max={max}/>
            <span>{value}%</span>
        </Container>
    )
}

export default ProgressBar;

原因及解决方案 #

1. WebKit伪元素选择器语法错误 #

代码中WebKit专属伪元素的写法有误：正确的WebKit伪元素选择器需要双冒号前缀+webkit标识，即::-webkit-progress-bar和::-webkit-progress-value，你写成了::webkit-progress-bar（少一个冒号），导致浏览器无法识别这些样式规则。

2. 高度设置优先级问题 #

建议直接在progress[value]选择器中设置height属性，WebKit伪元素的高度会继承自progress元素本身，单独在伪元素中设置可能被浏览器默认样式覆盖。

3. 颜色属性默认值缺失 #

如果未传入color属性，${props => props.color}会返回undefined，导致样式失效，需增加默认颜色值。

修改后的Container样式：

const Container = styled.div<ContainerProps>`
    progress[value] {
        margin-right: 8px;
        width: ${props => props.width};
        height: 10px;
        -webkit-appearance: none;
        appearance: none;

        &::-webkit-progress-bar {
            border-radius: 20px;
            background-color: #eee;
        }
    
        &::-webkit-progress-value {
            border-radius: 20px;
            background-color: ${props => props.color || '#007bff'};
        }

        /* 兼容Firefox */
        &::-moz-progress-bar {
            border-radius: 20px;
            background-color: ${props => props.color || '#007bff'};
        }
    }
`

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