英文:
Material UI - How to style the list marker using sx props?
问题
在Material UI中，如果我有一个带有标记的列表，可以使用sx和scss来设置标记的样式，例如更改字体、颜色等。
英文:
Follow up question from : https://stackoverflow.com/questions/75857187/material-ui-hierarchical-ordered-list
In material ui, if I have such a list with markers,
<List sx={{ listStyle: "decimal", pl: 4 }}>
<ListItem sx={{ display: "list-item" }}>
<ListItemText primary="A" />
</ListItem>
<ListItem sx={{ display: "list-item" }}>
<ListItemText primary="List" />
</ListItem>
<ListItem sx={{ display: "list-item" }}>
<ListItemText primary="Item" />
</ListItem>
</List>
1. xxxxx
2. xxxxx
a. xxxxx
b. xxxxx
3. xxxxx
4. xxxxx
a. xxxxx
b. xxxxx
How do I style the marker using sx and scss ? eg change the font, color, etc.
Thanks.
答案1
得分: 1
以下是代码部分的中文翻译：
sx={{
display: "list-item",
fontFamily: "Calibri",
color: "#ff0000"
}}
你可以在MUI文档中找到如何使用sx的示例。
要使用scss，请将其导入到使用样式的文件中：
import './styles.scss';
类似Webpack这样的打包工具需要一个特殊的加载器来将scss文件转换为JavaScript。
在scss中使用的选择器（ID、类等）可以通过在JSX标签中使用id和className JSX属性来匹配：
<ListItem id="someId" className="someGlobalClassName" sx={{ display: "list-item" }}>
为了避免在每个标签上重复定义css或应用类名，你可以直接定位MUI组件，使用它们的全局类名。例如，<ListItem>标签使用.MuiListItem-root来应用样式到根元素。全局类名在API页面中列出。
更新
请注意，使用标准的css，默认情况下，不可能更改列表项的符号颜色。这样的更改需要像w3schools.com上演示的伪元素技巧：
ul li::before {
content: '\u2022'; // 符号字符
color: ...;
font-family: ...;
...
}
标准的css属性为list-style包括：list-style-image、list-style-position和list-style-type。列表标记颜色属性并不存在。
Material-UI列表使用像图标、头像、图片和复选框等组件作为标记。sx prop会像应用于其他MUI组件一样应用到这些组件上。但是，如果你想要使用伪元素技巧来应用样式到标准外观的标记，可以尝试以下代码。
这个示例代码显示了两个列表。第一个使用符号，第二个使用十进制列表类型。
希望这些翻译对你有所帮助。如果有其他问题，请随时提出。
英文:
Your question contains css with sx and demonstrates how to apply styles using sx:
sx={{
display: "list-item",
fontFamily: "Calibri",
color: "#ff0000
}}
The MUI docs have examples on how to use sx.
To use scss, import it into the file that uses the styles:
import './styles.scss';
A bundler like Webpack needs a special loader to read scss files into JavaScript.
The selectors (IDs, classes, etc.) used in the scss match those in the JSX tags by using the id and className JSX attributes:
<ListItem id="someId" className="someGlobalClassName" sx={{ display: "list-item" }}>
To avoid repeating css definitions or applying class names on each tag you can target MUI components directly by using their Global class names. For example, the <ListItem> tag uses .MuiListItem-root to apply styles to the root element. Global class names are listed on the API page for components.
UPDATE
Note that using standard css By default, it is not possible to change the bullet color of a list item. --w3schools.com. Such changes require pseudo-element hacks like this (as demonstrated on the w3schools.com page):
ul li::before {
content: '\u2022'; // Bullet character
color: ...;
font-family: ...;
...
}
Standard css properties for list-style are: list-style-image, list-style-position, and list-style-type. A list marker color property does not exist.
As markers, Material-UI Lists use components such as icons, avatars, images and checkboxes. The sx prop is applied to these components as it would be applied to any other MUI component. However, if you are looking to employ pseudo-element hacks to apply styles to standard-looking markers you can try the code below.
This sample code displays two lists. The first uses bullets. The second uses a decimal list type.
index.html
<!DOCTYPE html>
<html>
<head>
<title>MUI List sample</title>
<link rel="icon" href="data:;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<script defer src="index.js"></script></head>
<body>
<div id="container"></div>
<noscript> Please enable javascript to view the page</noscript>
</body>
</html>
app.jsx
/**
* Modified Basic List example from MUI docs.
* Compiled into a bundle saved as index.js.
*
* @see https://mui.com/material-ui/react-list/#basic-list
*/
import React from 'react';
import ReactDOM from 'react-dom';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import InboxIcon from '@mui/icons-material/Inbox';
import DraftsIcon from '@mui/icons-material/Drafts';
export default function App() {
return (
<Box sx={ { width: '100%', maxWidth: 360, bgcolor: 'background.paper' } }>
<nav aria-label="main mailbox folders">
<List
sx={ {
[`& li.MuiListItem-root::before`]: {
content: "'\u2022'", // Bullet character
color: 'red',
fontFamily: 'Segoe UI'
}
} }
>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItemButton>
</ListItem>
</List>
</nav>
<Divider />
<nav aria-label="secondary mailbox folders">
<List
sx={ {
[`& li.MuiListItem-root`]: {
display: 'list-item',
listStyleType: 'decimal',
marginLeft: '1em'
},
[`& li.MuiListItem-root::marker`]: {
width: '1em',
fontFamily: "'Palatino Linotype'",
fontSize: '24px',
color: 'red'
}
} }
>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Trash" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton component="a" href="#simple-list">
<ListItemText primary="Spam" />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemText primary="A" />
</ListItem>
<ListItem>
<ListItemText primary="List" />
</ListItem>
<ListItem>
<ListItemText primary="Item" />
</ListItem>
</List>
</nav>
</Box>
);
}
const container = document.getElementById( 'container' );
ReactDOM.render(
<App />,
container
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论