在样式组件 React 中忽略父样式中的 CSS

Question

我正在使用使用样式组件的现有组件库创建一个 React 组件。我有时需要覆盖父库中的样式并使用我自己的样式。这是库中具有样式的 TextInput 组件，

border: 2px solid black;

在使用此组件时，我不希望输入框周围有边框。相反，我只想要一条下划线。

我用两种方法做到了 使用样式道具，

<TextInput
name="test-input"
value={testInput}
onChange={onInputChange}
style={{borderTop: 'none',borderRight: 'none',
borderLeft:'none', borderBottom: '2px solid black'}}
/>

通过这个我得到一个黑色边框底部，但它需要我对所有其他三个重复。有没有更好的方法让我可以写一行来解决我的问题？

我根据现有组件创建了一个样式组件，

const TextInputStyled = styled(TextInput)`
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid black`;

这是我具有上述样式的组件。

<TextInputStyled
                name="test-input"
                value={testInput}
                onChange={onInputChange}
            />

在这种情况下，我得到的边框底部为 2px 黑色，但另一个边框也存在，这也是重复。

有更好的方法吗？我经常需要调整父组件的样式。

非常感谢任何帮助。

Answer 1

你为什么不尝试这个代码：

<TextInput
name="test-input"
value={testInput}
onChange={onInputChange}
style={{border:'unset', borderBottom: '2px solid black'}}
/>

更新：

如果你坚持使用样式组件，ThemeProvider是解决方案：

const TextInput=styled.input `
border: 2px solid black;
border-bottom:  ${props => props.theme.borderBottom};
border-top:${props => props.theme.borderTop};
border-left:${props => props.theme.borderLeft};
border-right:${props => props.theme.borderRight};
`;

       \\Define what props.theme will look like
 const theme= {
    borderTop: 'none;',
    borderRight: 'none;',
    borderLeft: 'none;',
    borderBottom: '1px solid black;'
  }
return(<>
  \\normal TextInput with border
 <TextInput
name="test-input"
/>


     \\customized TextInput without border except underline
 <ThemeProvider theme={theme}>
  <TextInput
name="test-input"



/>
</ThemeProvider>
</>
)

如果你不了解ThemeProvider，请阅读这篇文章：

https://styled-components.com/docs/advanced