Comments (8)
Hello @SageJustus,
You are trying add styles to the Icon as you would on the TreeItem
component. TreeItem2
only uses classes defined by state changes.
In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly to TreeItem2IconContainer
(check line 293 of the modified demo)
Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄
from mui-x.
@arthurbalduini I assume your modified code is as follows:我假设您修改后的代码如下:
<TreeItem2IconContainer sx={{ backgroundColor: "red" }} {...getIconContainerProps()} >
So what does the following code do? Has it taken effect?那么下面的代码是做什么的呢?生效了吗?
[`& .${treeItemClasses.iconContainer}`]: { marginRight: theme.spacing(2), }
The mentioned line will not have the desired effect either.提到的行也不会达到预期的效果。 On the docs you can find the list of the available classes for
TreeItem2
. Notice that it differs from the available classes listed forTreeItem
.在文档中,您可以找到 的TreeItem2
可用类列表。请注意,它与 列出的可用TreeItem
类不同。
@arthurbalduini Well I think this is a documentation issue and the examples in the documentation should be updated.
from mui-x.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@SageJustus: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
from mui-x.
Hello @SageJustus, 你好
You are trying add styles to the Icon as you would on the
TreeItem
component.TreeItem2
only uses classes defined by state changes.您正在尝试向图标添加样式,就像在TreeItem
组件上一样。TreeItem2
仅使用由状态更改定义的类。 In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly toTreeItem2IconContainer
(check line 293 of the modified demo)在你分享的演示中,为了改变图标容器的背景颜色,你可以选择对你来说更方便的样式方法,例如,为它定义你自己的类,或者直接使用内联样式(TreeItem2IconContainer
查看修改后的演示的第 293 行)Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄将认为问题已关闭,如果您发现有问题😄,请随时重新打开它
the modified demo Sandbox not found
It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.
from mui-x.
Hello @SageJustus, 你好
You are trying add styles to the Icon as you would on the
TreeItem
component.TreeItem2
only uses classes defined by state changes.您正在尝试向图标添加样式,就像在TreeItem
组件上一样。TreeItem2
仅使用由状态更改定义的类。 In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly toTreeItem2IconContainer
(check line 293 of the modified demo)在你分享的演示中,为了改变图标容器的背景颜色,你可以选择对你来说更方便的样式方法,例如,为它定义你自己的类,或者直接使用内联样式(TreeItem2IconContainer
查看修改后的演示的第 293 行)Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄将认为问题已关闭,如果您发现有问题😄,请随时重新打开它
@arthurbalduini I assume your modified code is as follows:
<TreeItem2IconContainer
sx={{ backgroundColor: "red" }}
{...getIconContainerProps()}
>
So what does the following code do? Has it taken effect?
[`& .${treeItemClasses.iconContainer}`]: {
marginRight: theme.spacing(2),
}
from mui-x.
Hello @SageJustus, 你好
You are trying add styles to the Icon as you would on theTreeItem
component.TreeItem2
only uses classes defined by state changes.您正在尝试向图标添加样式,就像在TreeItem
组件上一样。TreeItem2
仅使用由状态更改定义的类。 In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly toTreeItem2IconContainer
(check line 293 of the modified demo)在你分享的演示中,为了改变图标容器的背景颜色,你可以选择对你来说更方便的样式方法,例如,为它定义你自己的类,或者直接使用内联样式(TreeItem2IconContainer
查看修改后的演示的第 293 行)
Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄将认为问题已关闭,如果您发现有问题😄,请随时重新打开它the modified demo Sandbox not found
It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.
Sorry, I just changed the privacy of the Sandbox so you can access it.
from mui-x.
@arthurbalduini I assume your modified code is as follows:
<TreeItem2IconContainer sx={{ backgroundColor: "red" }} {...getIconContainerProps()} >
So what does the following code do? Has it taken effect?
[`& .${treeItemClasses.iconContainer}`]: { marginRight: theme.spacing(2), }
The mentioned line will not have the desired effect either.
On the docs you can find the list of the available classes for TreeItem2
. Notice that it differs from the available classes listed for TreeItem
.
from mui-x.
@arthurbalduini Well I think this is a documentation issue and the examples in the documentation should be updated.
I agree with you, will send a PR to update the docs ASAP. Thank you !
from mui-x.
Related Issues (20)
- [data grid] sorting is not working for DD/MM/YYYY and MM/DD/YYYY date format it is only working for YYYY/MM/DD. HOT 5
- [data grid] add a "does not contain" filter HOT 3
- [data grid] How do I fix this? - `GridVirtualScrollbar.js:88 Uncaught TypeError: Cannot set properties of null (setting 'scrollTop')` HOT 7
- [charts] `ChartsTooltip` often not working properly when assigning `innerRadius` in series and using `ResponsiveChartContainer` HOT 2
- [data grid] Upgrading `@mui/x-data-grid-premium` to `v7` produces emotion error HOT 4
- [data grid] `checkboxSelection` Issue HOT 4
- [data grid] Print issue HOT 2
- [data grid] How to change the default DataGrid density to compact? HOT 3
- [data grid] customized sort tooltip flashes during server-side sort HOT 2
- [charts] Allow basic customization of Sparkline y-axis HOT 3
- Move @mui/internal-test-utils to devdepedencies. HOT 7
- [pickers] Toolbar components are not using the set `timezone` HOT 8
- [pickers] Wrong focusable component on Year Calendar HOT 1
- [charts] bar chart gradient color HOT 6
- Dayjs type removed from Datepicker value HOT 3
- [data grid] The user should not hide all columns; at least one column should be displayed HOT 1
- [data grid] How does pagination work when the row elements are not static? HOT 2
- [data grid] Strange behavior when `paginationMode` is `undefined`
- [pickers] The date picker shouldn't steal the focus when closing HOT 4
- [data grid] Flex col definition breaks on print. HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.