MUI에서 타이포그래피 텍스트 색상 설정

MUI에서 타이포그래피 텍스트 색상 설정

전 MUI에 꽤 익숙하지 않아요. 그리고 전 MUI를Typography텍스트 색상은 다음과 같습니다.

const theme = createMuiTheme({
  palette: {
    text:{
      primary: "#FFFFFF"
    }
  }
});

const WhiteText = (props: { text:string, varient: Variant | 'inherit'}) => {
  return <ThemeProvider theme={theme}>
      <Typography variant={props.varient} align="center" color="textPrimary">{props.text}</Typography>
  </ThemeProvider>
}
...
<WhiteText varient="h3" text="This text should be white"/>

그러나 텍스트의 색상은 변경되지 않습니다:/

주제를 잘못 적용한 건가요?

이 샌드박스에서는 정상적으로 동작하지만 권장하는 접근법은 아닙니다.이러한 커스터마이즈에는 중첩된 테마 대신withStyles(Material-UI의 v4의 경우 - v5의 예는 더 아래에 있음)

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const WhiteTextTypography = withStyles({
  root: {
    color: "#FFFFFF"
  }
})(Typography);

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <WhiteTextTypography variant="h3">
        This text should be white
      </WhiteTextTypography>
    </div>
  );
}

---

v5에서는 MUI에 의해color(를 가진 모든 컴포넌트에 대해) 큰 도움이 됩니다.color소품) 테마 팔레트의 모든 색상을 지원하므로 흰색의 경우 공통 색상을 사용할 수 있습니다.흰색:

import React from "react";
import Typography from "@mui/material/Typography";

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <Typography variant="h3" color="common.white">
        This text should be white
      </Typography>
    </div>
  );
}

관련 답변: 머티리얼 UI에서 추가 색상을 추가할 수 있습니까?

모든 Typography 요소에 기본 색상을 설정하고 다른 재료 UI 요소에 기본 색상을 설정하지 않으려면 다음과 같이 하십시오.

const theme = createMuiTheme({
  typography: {
    allVariants: {
      color: "pink"
    },
  },
});

테마를 쓰고 싶지 않다면.를 통해 설정할 수 있습니다.style아트리뷰트도.

<Typography style={{color:"#00adb5"}}  variant="h3" >My Text</Typography>

MUI 5의 경우,sx기여하다,

<Typography sx={{ color: "#00adb5" }} variant="h3">
   My Text
</Typography>

그color을 지지하다.Typography어떤 것이 소품의 좋은 특징인지 테마 인식입니다.즉, VIP를 설정하는 것 외에color늘 그렇듯이:

<Typography variant="h1" color="#00ff00">

기본 팔레트 또는 다음과 같이 정의된 사용자 정의 팔레트에서 테마 색상을 참조할 수 있습니다.

const theme = createTheme({
  palette: {
    tomato: '#FF6347',
    pink: {
      deep: '#FF1493',
      hot: '#FF69B4',
      medium: '#C71585',
      pale: '#DB7093',
      light: '#FFB6C1',
    },
  },
});

커스텀 등록 후theme에ThemeProvider, 에서 사용할 수 있습니다.Typography스트링 패스를 지정함으로써Palette색상 값에 대한 객체:

<Typography color="tomato">text</Typography>
<Typography color="pink.deep">text</Typography>
<Typography color="pink.hot">text</Typography>
<Typography color="pink.medium">text</Typography>
<Typography color="pink.pale">text</Typography>
<Typography color="pink.light">text</Typography>

여기 몇 가지 예가 있습니다.Typograhy팔레트의 기본 색상을 사용합니다.

<Typography color="primary.main">text</Typography>
<Typography color="primary.dark">text</Typography>
<Typography color="primary.light">text</Typography>
<Typography color="secondary">text</Typography>
<Typography color="text.secondary">text</Typography>
<Typography color="text.disabled">text</Typography>

재료 UI에서 타이포그래피 텍스트 색상 설정

<Typography gutterBottom variant="h9" component="h2" color="secondary">
    {card.unitNumberList}
</Typography>

저는 이것을 시도해보고 싶습니다.- 테마에 'h3' 변종과 같은 타이포그래피 속성을 포함합니다.

const theme = createMuiTheme({
  palette: {
    text: {
      primary: "#FFFFFF"
    }
  },

  typography: {
    useNextVariants: true,
    fontFamily: "Montserrat",
    h3: {
      fontSize: 33,
      fontFamily: "Montserrat",
      fontWeight: 300,
      color: "#2882F8",
      letterSpacing: "0.0075em",
      verticalAlign: "middle",
      alignItems: "center",
      textAlign: "center"
    }
  }
});

그러면 타이포그래피의 색상은 방금 주제 내에서 선언한 변형="h3"에서 직접 가져와야 합니다.'컬러' 소품을 별도로 타이포그래피로 넘길 필요는 없습니다.

이것을 실장하려면 , 이 Repo를 참조해 주세요.여기서는 모든 타이포그래피 변형을 글로벌이라고 하는 하나의 중앙 글로벌 파일에 보관하고 있습니다.Teme.js 및 App.js에서 MuiThemeProvider 내의 다른 모든 컴포넌트를 다음과 같이 정리합니다.

<MuiThemeProvider theme={globalTheme}>

따라서 프로젝트 내의 모든 Typography 컴포넌트는 글로벌하게 선언한 바리안트에 액세스할 수 있습니다.Theme.js 파일

먼저 텍스트 요소의 대체 색상을 정의해야 합니다.

text: {
  primary: 'rgba(60, 72, 88, 1)',
  secondary: 'rgba(132, 146, 166, 1)',
  disabled: 'rgba(60, 72, 88, 0.38)',
  hint: 'rgba(60, 72, 88, 0.38)',
}

다음으로 다음 작업을 수행할 수 있습니다.

<Typography variant="h1">Lorem ipsum</Typography> // Default text color
<Typography variant="subtitle1" color="textSecondary">dolor sit amet</Typography> // Secondary text color.
<Typography variant="body1" color="secondary">consectetur adipiscing elit</Typography> // Global secondary color.

material-ui 코어에서 make 스타일을 사용하여 아래 예시와 같이 텍스트 색상을 포함할 수 있는 텍스트의 커스텀룩을 만들 수 있습니다.

import {makeStyles} from '@material-ui/core/styles'

const useStyles=makeStyles((theme)=>({
text:{
    color:"#ffffff"
}
}));

const classes=useStyles();
<Typography align="center" className={classes.text}>This text should be white</Typography>

v4를 계속 사용하는 경우, 타이프스크립트를 사용하고 있고 타이프세이프 정의를 원하는 사용자는 mui의 타이포그래피를 다음과 같이 확장할 수 있습니다.

import React, { FC } from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core";
import MuiTypography, { TypographyProps } from "@material-ui/core/Typography";
import clsx from "clsx";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    warning: {
      color: theme.palette.warning.main,
    },
    success: {
      color: theme.palette.success.main,
    },
  })
);

type AdditionalColorKeys = keyof ReturnType<typeof useStyles>;

export type TypographyWithSpacingProps = Omit<TypographyProps, "color"> & {
  color?: AdditionalColorKeys | TypographyProps["color"];
};

export const Typography: FC<TypographyWithSpacingProps> = ({ color, className, ...props }) => {
  const classes = useStyles();
  let colorClass = "";

  if (color && color in classes) {
    colorClass = classes[color as keyof ReturnType<typeof useStyles>];
  }

  return <MuiTypography {...props} className={clsx(className, colorClass)} />;
};

이렇게 시스템 소품 'sx'를 추가하여 간단하게 타이포그래피 색상을 변경할 수도 있습니다.

<Typography
      variant="h6"
      sx={{
          color: "white",
         }}
>

언급URL : https://stackoverflow.com/questions/60607586/set-typography-text-color-in-mui