React-Bootstrap的下拉菜单组件上的自定义样式 [英] Custom Style on React-Bootstrap's Dropdown Menu component
问题描述
我尝试将自定义css样式应用于react bootstrap组件,但无法弄清楚如何访问该组件的JSX中未显式的元素.例如:
I am trying to apply a custom css style to a react bootstrap component, but cannot figure how to access elements that are not explicit in the component's JSX. For example:
<ButtonGroup>
<DropdownButton className="ddown" id="ddown" title="Dropdown">
<MenuItem className="itemxx" href="#books">Books</MenuItem>
<MenuItem className="itemxx" href="#podcasts">Podcasts</MenuItem>
<MenuItem className="itemxx" href="#">Tech I Like</MenuItem>
<MenuItem className="itemxx" href="#">About me</MenuItem>
<MenuItem className="itemxx" href="#addBlog">Add a Blog</MenuItem>
</DropdownButton>
</ButtonGroup>
没有下拉框的出口,我希望提供特定的宽度并消除其圆角.有没有办法可以在CSS中访问它?
has no outlet for the Dropdown box, which I am looking to give a specific width and eliminate its rounded corners. Is there a way that I can access it in my css?
这是我要编辑的元素,顺便说一下,如果我尝试通过.dropdown-menu进行访问,则1)我更改了所有下拉菜单,并且2)我不能更改其大部分值.
Here is the element I want to edit, which by the way if I try to access through .dropdown-menu, 1) I change all dropdowns, and 2) I cant change most of its values.
推荐答案
自定义时,将自定义className添加到<MenuItem></MenuItem>
并通过在.css文件中className末尾附加a
进行编辑.
Add a custom className to <MenuItem></MenuItem>
and edit it by appending a a
at the end of className in your .css file while customising.
在您的.js文件中:
<MenuItem className="dropdown-link"> DaItem </MenuItem>
在.css文件中:(请注意选择器中的a
)
In your .css file: (Note the a
in the selector)
.dropdown-link a {background: red; color: yellow;}
P.S:您可能需要在.css
P.S: You may need to add !important
in .css
这篇关于React-Bootstrap的下拉菜单组件上的自定义样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!