Блог

Когда кто-то вводит входное значение, выходящее за пределы заранее определенного диапазона, я хочу показать сообщение. Я знаю, как это сделать в html / css (пример здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range ), но я изо всех сил пытаюсь повторить эту же функциональность, используя стилизованные компоненты. Вот несколько примеров кода:

 const ErrorLabel = styled.label`
`;

const Input = styled.input`
    // width, height, background-color, border, font-size, margin, padding, color props

    amp;:out-of-range{
        background-color: rgba(255, 0, 0, 0.5);

    }
    amp;:out-of-range   ${ErrorLabel}:after {
        content: 'hi! im after';
      }

`;
 

И тогда мой компонент возвращает код, подобный этому (поэтому теги ввода и ошибки не совсем одинаковые):

                 <div style = {{other props}}><Input 
                    id = {"value1"}
                    name = {"value1"}
                    min = "5"
                    max = "10" 
                    maxLength="8"
                    onChange = {onChange("result")} 
                    value = {result}/></div>
            <ErrorLabel for="value1">is</ErrorLabel>