React-Toolbox 复选框内联

Question

我目前在尝试像这样内联显示 react-toolbox-checkboxes https://github.com/react-toolbox/react-toolbox/tree/dev/components/checkbox 时遇到问题：

但我所能做的就是像这样显示它们：

代码如下所示：

           <Checkbox
                checked={this.state.checkboxes[0].task}
                label={t('search:instance_template.task')}
                onChange={() => {
                    this.handleCheckboxChange(0, 'task')
                }}
            />

样式如下：

input[type="checkbox"]{
    display: inline-block;
}

复选框确实接收类和属性，但像 "display: inline-block" 这样的属性对它们没有任何影响。有任何想法吗？谢谢！

Answer 1

根据@Hash 的评论，结果如下：

        <div id="instanceCheckboxes" style={{display: 'inline-flex', flexDirection: 'row'}}>
                <Checkbox
                    checked={this.state.checkboxes[0].task}
                    label={t('search:instance_template.task')}
                    onChange={() => {
                        this.handleCheckboxChange(0, 'task')
                    }}
                />
                ...
            </div>

没有必要直接设置复选框的样式。那是结果：

Answer 2

[阅读目的] 也链接两个页面，这将有助于了解每种风格的工作方式。 Flexbox, CSSFlexbox

与问题相关的示例。

React-Toolbox 复选框内联

React-Toolbox checkboxes inline

javascript

css

checkbox

reactjs

react-toolbox