Question

我使用react，我的其他CSS定义在js文件中定位为这样的常量（希望这不是一个坏习惯）：

const STYLE = {
    logo: {
        width: '206px',
        height: '73px',
        margin: '120px auto 0',
        display: 'block'
    },
    label: {
        fontSize: 'x-small'
    },
    control: {
        border: 'solid',
        borderWidth: '0 0 1px',
        borderColor: '#E0E0E0',
        width: '200px'
    }
};

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <img src='.../logo.gif' style={STYLE.logo}/>
                <FormGroup>
                    <Col smOffset=...>
                        <Form horizontal>
                            <FormGroup>
                                <Col sm=... style={STYLE.label}>
                                    Label: 
                                    <input style={STYLE.control} type="text"/>
                                </Col>
                            </FormGroup>
                        </Form>
                    </Col>
                </FormGroup>
            </div>
        )
    }
}

我想用CSS删除输入组件周围的边框。我需要将以下css添加到我的STYLE.control：

input:focus {
    outline:none;
}

但我不知道该怎么做，因为（当然）这不起作用：

const STYLE = {
    noBorder: {
        input:focus: 'outline:none'
    }
};

Answer 1

render() {
        return (
            <div>
              <style>
               input:focus {
                 outline: none;
               }
              </style>

Answer 2

在我使用React文档中的一些样式后，似乎解决此问题的最佳选择是使用Radium。

如何更改输入/文本区域的边框颜色：焦点？

2 个答案: