Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

style não está sendo aplicado no componen css-in-js

por Maria Laryssa Gomes Melo
| 37.3k xp | 6 posts

Olá, estou tendo problema de levar o styleshett para o compente BaseComponent esse e o link com o codigo completo Link github. codigo do componente com problema


interface MenuProps {
  menuIsVisible: boolean;
}
const MenuIcon = styled(BaseComponent)<MenuProps>`
  cursor: pointer;
  position: relative;
  z-index: 3;

`;

interface MenuHamburgerProps {
  styleSheet?: StyleSheet;
  menuIsVisible: boolean;
  handleMenuIsVisible: () => void;
}

export const MenuHamburger = ({
  menuIsVisible,
  handleMenuIsVisible,
  styleSheet,
}: MenuHamburgerProps) => {
  return (
    <MenuIcon
      onClick={handleMenuIsVisible}
      menuIsVisible={menuIsVisible}
      styleSheet={styleSheet}
    >
      <div className="line-1"></div>
      <div className="line-2"></div>
      <div className="line-3"></div>
    </MenuIcon>
  );
};

Esse e o componete BaseComponent

interface StyledBaseComponentProps {
  styleSheet?: StyleSheet;
  ref: any;
}

const StyledBaseComponent = styled.div<StyledBaseComponentProps>`
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-shrink: 0;
  ${({ styleSheet }) => parseStyleSheet(styleSheet)}
`;

export interface BaseComponentProps {
  styleSheet: StyleSheet;
  [key: string]: any;
}

export const BaseComponent = React.forwardRef<unknown, BaseComponentProps>(
  (props, ref) => {
    return (
      <StyleSheetManager shouldForwardProp={(prop) => prop !== 'styleSheet'}>
        <StyledBaseComponent ref={ref} {...props} />
      </StyleSheetManager>
    );
  },
);

BaseComponent.defaultProps = {
  styleSheet: {},
};

Basicamente qualquer styleSheet que eu passe no MenuIcon com a prop styleSheet não e aplicado e chega no BaseComponent como vazio. Alguém poderia me horientar nesse problema.

3 respostas
solução!
por Renan Cezar Wuicik
| 3167.2k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Maria! Tudo ok contigo?

Pelo que pude observar em seu código, parece que você está tentando passar a propriedade styleSheet para o componente MenuIcon, que é um componente estilizado. No entanto, você não está aplicando essa propriedade dentro do componente estilizado MenuIcon.

A biblioteca styled-components permite que você passe props para o seu componente estilizado e use essas props para alterar seu estilo. No entanto, essas props precisam ser usadas dentro do componente estilizado para ter algum efeito.

No seu caso, você poderia fazer algo assim:

const MenuIcon = styled(BaseComponent)<MenuProps>`
  cursor: pointer;
  position: relative;
  z-index: 3;
  ${({styleSheet}) => styleSheet && css`
    ${styleSheet}
  `}
`;

Aqui, estou usando uma função para verificar se a prop styleSheet foi passada. Se foi, eu a aplico ao componente estilizado. Note que estou usando o helper css do styled-components para injetar o estilo.

Lembre-se que essa é uma sugestão baseada na estrutura do seu código e pode não funcionar perfeitamente, já que não tenho acesso ao restante do seu código para testá-la.

Era isso. Espero ter ajudado!

Abraços e bons estudos!

por Maria Laryssa Gomes Melo
| 37.3k xp | 6 posts

No caso mesmo com o baseComponent já tento essa estrutura o MenuIcon não herda isso?

por Renan Cezar Wuicik
| 3167.2k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Oie, então, no seu código, o componente estilizado MenuIcon está realmente estendendo o BaseComponent, mas não herda automaticamente as propriedades do styleSheet do BaseComponent. Você precisa explicitamente passar a propriedade styleSheet do MenuHamburger para o MenuIcon.

Você pode fazer isso da seguinte maneira:

interface MenuProps {
  menuIsVisible: boolean;
  styleSheet?: StyleSheet; // Adicione a prop styleSheet aqui
}

const MenuIcon = styled(BaseComponent)<MenuProps>`
  cursor: pointer;
  position: relative;
  z-index: 3;
  ${({ styleSheet }) => parseStyleSheet(styleSheet)} // Use a prop styleSheet aqui
`;

interface MenuHamburgerProps {
  styleSheet?: StyleSheet;
  menuIsVisible: boolean;
  handleMenuIsVisible: () => void;
}

export const MenuHamburger = ({
  menuIsVisible,
  handleMenuIsVisible,
  styleSheet,
}: MenuHamburgerProps) => {
  return (
    <MenuIcon
      onClick={handleMenuIsVisible}
      menuIsVisible={menuIsVisible}
      styleSheet={styleSheet} // Passe a prop styleSheet para o MenuIcon
    >
      <div className="line-1"></div>
      <div className="line-2"></div>
      <div className="line-3"></div>
    </MenuIcon>
  );
};

Certifique-se de passar a prop styleSheet do MenuHamburger para o MenuIcon, como mostrado acima. Isso garantirá que o estilo seja corretamente aplicado ao MenuIcon a partir do BaseComponent.

Era isso.

Abraços.