Social media dashboard with theme switcher with React

Community feedback

• 

  Nurcholis•420

  @cholis04Posted over 2 years ago

  Hi Emerson Melo Martins,

  When you pass custom props to a style component, you need to add a prefix ($) to the props name to prevent the props from being an invalid attribute on the DOM.

  export  function  PrimaryCard(...) {
  	return (
  		<CardContainer  $type={type}>
  			...
  			...
  			<CardFooter  $color={footerColor}>
  				...
  			</CardFooter>
  		</CardContainer>
  	);
  }
  

  interface IPrimaryCardFooterProps {
  	$color:  PrimaryCardFooterColorType;
  }
  
  export  const CardFooter = styled.footer<IPrimaryCardFooterProps>`
  	position:  relative;
  	color:  ${(props) =>  props.theme[CARD_FOOTER_COLORS[props.$color]]};
  	display:  flex;
  	align-items:  center;
  	gap:  0.5rem;
  `;
  

  Transient props reference here

  To improve accessibility, you can add a label to the tag <input type="checkbox" aria-label="Toggle theme" />

  Marked as helpful

  1

  ---

  

  Emerson Melo Martins•110

  @emersonmelomartinsPosted over 2 years ago

  @cholis04 oh i see, i didn't know that prefix, in those situations we can see the importance to read the documentation haha.

  Thank you so much!!

  1

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @emersonmelomartins Haha you're right, sometimes it happens to me too.

  1