[英]Custom Style on React-Bootstrap's Dropdown Menu component
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. 我试图将自定义css样式应用于react bootstrap组件,但无法弄清楚如何访问该组件的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>
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? 有没有办法可以在CSS中访问它?
EDIT: 编辑:
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. 这是我要编辑的元素,顺便说一句,如果我尝试通过.dropdown-menu进行访问,则1)我更改了所有下拉菜单,并且2)我不能更改其大部分值。
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. 将自定义className添加到<MenuItem></MenuItem>
并通过自定义在.css文件中的className末尾附加a a
编辑。
In your .js file: 在您的.js文件中:
<MenuItem className="dropdown-link"> DaItem </MenuItem>
In your .css file: (Note the a
in the selector) 在您的.css文件中:(请注意选择器中的a
)
.dropdown-link a {background: red; color: yellow;}
PS: You may need to add !important
in .css PS:您可能需要在.css中添加!important
Thank you all, I found an way to this! 谢谢大家,我找到了解决方法! I was able to access the specific menu by including [aria-labelledby = ddown] (ddown is my dropdown's custom class) on the CSS like so: 我可以通过在CSS上加入[aria-labelledby = ddown](ddown是我的下拉菜单的自定义类)来访问特定菜单,如下所示:
.dropdown-menu[aria-labelledby = ddown] {
background-color: lightblue;
max-width: 80px; //This, by the way, is not working for some reason.
border-radius: 0;
margin: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.