如何在 JSS 中指定 :focus 属性？

Question

我正在将 react-native-web 与 expo 和 react-native-paper（材料 ui）一起使用

我的问题是已编译的网络版本中焦点大纲属性上的 textarea，所以我需要摆脱这个蓝色边框。通常我会这样做

textarea:focus {
    outline:none!important
}

使用 react-native 我们不能使用 css 而只能使用 jss，但是如何为这个属性做呢？

<TextInput
   label='Email'
   value={this.state.text}
   onChangeText={text => this.setState({ text })}
   style={???} 
/>

working example

Answer 1

对于 React 组件的内联样式，您不能这样做。有两种方法可以实现。

选项 1：将样式放入组件的状态中并使用 onFocus 来操作它

选项 2：在 JS 库中使用 CSS，例如 https://www.styled-components.com/

Answer 2

这可能会有所帮助

state = {
        backgroundColor: 'green'
    }

    onFocus() {
        this.setState({
            backgroundColor: 'green'
        })
      }

      onBlur() {
        this.setState({
          backgroundColor: '#ededed'
        })
      }

    <TextInput 
        onBlur={ () => this.onBlur() }
    onFocus={ () => this.onFocus() }
    style={{ height:60, backgroundColor: this.state.backgroundColor }}  />

Answer 3

如果你使用 react-jss，你可以指定像这样的焦点和悬停的事件样式&:hover &:focus