Как стилизовать компоненты material-ui с эмоциями

Я хочу стилизовать материал Ui Tooltip и настроить его на классы всплывающих подсказок и стрелок. Как мне добавить к ним стили с эмоциями?

Я пытался следовать этому руководству: https://github.com/mui-org/material-ui/issues/11467#issuecomment-423845900 Но мне нужно настроить таргетинг на классы css.

Вот что я пробовал:

import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
import { experimentalStyled } from '@material-ui/core/styles';
import { customThemeOptions } from '../utils/globalStyles';
import { Global, css } from '@emotion/react';
const PtMuiTooltip = experimentalStyled(
      ({ className, title, children, ...other }: TooltipProps) => (
        <Tooltip
          title={title}
          style={{
            '& .MuiTooltip-arrow': {
              color: `${customThemeOptions.pt.palette.primary.main}`,
            },
          }}
          {...other}
        >
          {children}
        </Tooltip>
      ),
    )`
      background-color: ${customThemeOptions.pt.palette.primary.main};
      box-shadow: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.06)';
      padding: '1.5rem';
      border-radius: '0';
    `;

Все, что я хочу, - это создать свой собственный компонент из всплывающей подсказки пользовательского интерфейса материала и добавить стили в всплывающую подсказку и цвет стрелки. Как мне добиться этого с помощью эмоций и материального интерфейса?


reactjs material-ui emotion react-tsx
person Emilis Kakanis    schedule 26.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этот пример должен работать

    import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
    
    import { experimentalStyled } from '@material-ui/core/styles';
    import { customThemeOptions } from '../utils/globalStyles';
    
    const PtMuiTooltip = experimentalStyled(
      ({ className, title, children, ...other }: TooltipProps) => (
        <Tooltip
          title={title}
          classes={{ popper: className, arrow: 'arrow', tooltip: 'tooltip' }}
          {...other}
        >
          {children}
        </Tooltip>
      ),
    )`
      & .tooltip {
        background-color: ${customThemeOptions.pt.palette.primary.main};
        box-shadow: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.06)';
        padding: '1.5rem';
        border-radius: '0';
      }
      & .arrow {
        color: ${customThemeOptions.pt.palette.primary.main};
      }
    `;
    
    export default PtMuiTooltip;
person Paulius Rimgaila    schedule 28.03.2021