CODEWITHSUNDEEP
reactjstypescriptprogress-barstyled-components
bakrall
bakrall

Reputation: 633

Progress Bar styling with styled components

I have this code and somehow the only styles that work is only appearance: none; I am following this tutorial: https://blog.campvanilla.com/building-a-progress-bar-component-using-reactjs-styled-components-516dc2c3075a What might be wrong?

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;

Upvotes: 1

Views: 311

Answers (1)

Goacgras
Goacgras

Reputation: 11

Change to this

    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;
  }

Upvotes: 0

Related Questions