Блог

Главная - Вопросы по программированию - Как изменить размер шрифта содержимого значка пользовательского интерфейса материала в reactjs?

Как изменить размер шрифта содержимого значка пользовательского интерфейса материала в reactjs?

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я хочу изменить размер шрифта метки в значке пользовательского интерфейса материала. Я использую style={{ fontSize: "15" }} , но это влияет только на его дочерний элемент, который является значком.

Код:

 <Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
    <ShoppingCart className={classes.mediumIcon} />
</Badge>

Комментарии:

1. вы можете перезаписать . MuiBadge-класс точек css. Смотрите рабочую копию codesandbox.io/s/material-demo-forked-875uf?file=/demo.js

Ответ №1:

Идеальным способом было бы использовать классы badge , как указано в документации

 import { Badge } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

const useStyles = makeStyles((theme) => ({
  badge: {
    fontSize: 30
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Badge
        badgeContent={"h"}
        color="secondary"
        classes={{ badge: classes.badge }}
      />
    </div>
  );
}

Ответ №2:

Вы можете изменить размер шрифта, как показано ниже. создайте стили с разным размером шрифта в useStyles 

 const useStyles = makeStyles((theme) => ({
  font1: {
    fontSize: "1rem"
  },
)}

А затем назначьте его Badge компоненту, как показано ниже

 <Badge
        classes={{
          badge: classes.font1
        }}
        badgeContent={99}
        {...defaultProps}
      />

Песочница

Ответ №3:

Если вы используете систему mui, это может изменить размер шрифта значка

     <Badge
        badgeContent={9}
        color="error"
        overlap="circular"
        sx={{ "amp; .MuiBadge-badge": { fontSize: 9, height: 15, minWidth: 15 } }}
    >
        <IconButton sx={{ p: 0, color: "primary.main" }}>
            <Notifications />
        </IconButton>
    </Badge>

Ответ №4:

Вы можете использовать атрибут componentProps следующим образом (в этом примере изменяется цвет текста в значке, но тот же принцип будет работать для размера шрифта).

   <Badge badgeContent={comments}  componentsProps={{ root: {style: {color: 'white'}}  }}>
     <CommentIcon  />
  </Badge>