英文:
How to target the header of the mudexpansionpanel with css
问题
我想让MudExpansionPanel的标题栏与面板上的内容区域颜色不同。
MudExpansionPanel在样式属性中分配了粉色。
<MudExpansionPanel Text="标题文本" Style="@($"background-color:pink; color:black")>。
这会将整个面板的颜色都变成粉色（包括展开时）。我只想要标题栏的颜色改变。我该如何实现这个？
编辑：抱歉，我没有解释得太清楚。我希望颜色是动态的。所以对于一个面板，我希望它是粉色的，对于另一个面板，我希望它是蓝色的，依此类推。
英文:
I want the header of the MudExpansionPanel to be a different colour to the body of the content on the panel.
The MudExpansionPanel has the colour pink assigned in the Style attributes.
<MudExpansionPanel Text="Heading text" Style="@($"background-color:pink; color:black">
This turns the entire panel (including when it is expanded). I just want the heading to change colour.
How could I implement this?
Edit: Sorry I didn't explain myself too well. I want the colour to be dynamic. So for one panel I want it to be pink and for another blue ect..
答案1
得分: 1
首先，在项目中添加一个自定义的CSS文件，并在index.html或_Host.cshtml中进行注册。
注意CSS文件的优先级
然后按照以下方式应用您所需的样式
.mud-expand-panel-header{
color:pink;
}
英文:
First, add a custom CSS file to the project and register it in the index.html or _Host.cshtml
Pay attention to the priority of CSS files
Then apply your desired styles as below
.mud-expand-panel-header{
color:pink;
}
答案2
得分: 1
为了具体回答你的问题，你可以像这样针对MudExpansionPanel元素内的元素进行定位：
.mud-expand-panel-header *{ /* 这将定位到mud-expand-panel-header内的所有元素 */
color: black; /* 根据需要添加 !important */
}
在上面的代码中，你也可以使用类或其他有效的标识符，而不是 "'*'"：
.mud-expand-panel-header div { /* 或者 . */
color: black;
background: white;
}
英文:
To answer your question specifically, you can target the elements inside the MudExpansionPanel element like this:
.mud-expand-panel-header *{ /* this target all element inside mud-expand-panel-header*/
color: black; /*specify the color add !important if needed*/
}
Instead of '*' above, you can use class or other valid identifier.
.mud-expand-panel-header div { /* or . */
color: black;
background: white;
}
答案3
得分: 1
解决方案：
要使标题栏具有颜色，我编写了以下代码：
<MudExpansionPanel Text="Panel Heading" Style="@($"background-color:{@changingVaraible1}; color:{@changingVaraible2};")" IsInitiallyExpanded="false">
要使面板的展开部分变为白色，可以使用以下CSS：
.mud-collapse-wrapper-inner {
background: white;
}
英文:
Solution:
To get the header a colour I wrote:
<MudExpansionPanel Text="Panel Heading" Style="@($"background-color:{@changingVaraible1}; color:{@changingVaraible2};")" IsInitiallyExpanded="false">
To get the expanded rest of the panel white:
CSS:
.mud-collapse-wrapper-inner {
background: white;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论