reactjs - 如何使超出范围的样式组件影响另一个样式组件的道具？

Question

当有人输入超出预定义范围的输入值时，我想显示一条消息。我知道如何在 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

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

    }
    &: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>