[英]How can I apply custom styles on a reactstrap input?
If someone have experience with reactstrap and can help me with a problem: I have a reactstrap Input component and I want to apply "border: none" in styles.scss.如果有人有使用 reactstrap 的经验并且可以帮助我解决问题:我有一个 reactstrap 输入组件,我想在 styles.scss 中应用“border: none”。 In their documentation I don't see the Input component and what props can take.在他们的文档中,我没有看到 Input 组件以及可以使用的道具。 I don't know if I can apply border: none from its props.我不知道我是否可以从它的道具中应用边框:无。 So far I've tried in styles.scss:到目前为止,我已经在 styles.scss 中尝试过:
.form-control {
border: none;
}
or或者
#name.form-control {
border: none;
}
or by applying a className={styles.inputName}
prop on Input component and trying to apply css properties mentioned above.或者通过在 Input 组件上应用className={styles.inputName}
属性并尝试应用上面提到的 css 属性。 None of these worked so far.到目前为止,这些都没有奏效。 Thank you.谢谢你。
Frameworks like Reactstrap or React Bootstrap come with a CSS file you import. Reactstrap 或 React Bootstrap 之类的框架带有您导入的 CSS 文件。 It's a huge file that has all the properties you need.这是一个巨大的文件,包含您需要的所有属性。 All you do is apply class names to your React components as in className={"classname1 classname2..."}
.您所做的就是将 class 名称应用于您的 React 组件,如className={"classname1 classname2..."}
。
So for borders, here is the doc: https://mdbootstrap.com/docs/react/utilities/borders/ From that doc you can see, for example, that you can remove just the top border by applying this class name border-top-0
.因此,对于边框,这里是文档: https://mdbootstrap.com/docs/react/utilities/borders/从该文档中您可以看到,例如,您可以通过应用此border-top-0
名称边框来仅删除顶部边框- border-top-0
。 And there is a class name for just about every imaginable properly eg display, margin, padding, width, height etc.并且有一个 class 名称用于几乎所有可以想象到的正确名称,例如显示、边距、填充、宽度、高度等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.