带有样式组件的进度条样式

Question

我有这段代码，不知何故，唯一有效的样式是

appearance: none;

我正在遵循本教程：https://blog.campvanilla.com/building-a-progress-bar-component-using-reactjs-styled- Components-516dc2c3075a 可能出了什么问题？

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;

Answer 1

改成这样

    progress[value]::-webkit-progress-bar {
    height: 10px;
    border-radius: 20px;
    background-color: yellow;
  }

    progress[value]::-webkit-progress-value {
    height: 10px;
    border-radius: 20px;
    background-color: black;
  }