Styling a separate functional component with Styled Components

1
votes

How do I style the News component with the same styling applied to the F.Link component? I want to style this component while keeping it separate as its own functional component.

import styled from 'styled-components';

const F = {
  Container: styled.div`
    ...
  `,
  Text: styled.p`
    ...
  `,
  Link: styled.a`
    transition: color 0.5s linear;
    text-decoration: none;
    color: ${(props) => (props.isDark ? '...' : '...')};
  `,
};

export const Footer = ({ isDark }) => {
  const isPhone = window.matchMedia('...').matches;

  const News = () => (
    <>
      <a href='#'>News</a>
    </>
  );

  return (
    <F.Container>
      <F.Text>Thanks for stopping by
        <F.Link isDark={isDark} href='#'>Contact</F.Link>
        {isPhone ? (
          <></>
        ) : (
          <News/>
        )}
      </F.Text>
    </F.Container>
  );
};
2
reactjsstyled-components
Every component that you want to style has to accept a className property and pass it through to a DOM element. – Linda Paiste

2 Answers

1
votes

Is this what you are looking for? Now whenever you use <News /> it will use F.Link style component's styling

const News = () => (
  <F.Link isDark={isDark} href='#'>
     News
  </F.Link>
);
1
votes

Try this... Here I am creating a variation of News Component by extending it from the F.Link component.

// Rest of your code

const News = styled(F.Link)``;

 return (
    <F.Container>
      <F.Text>Thanks for stopping by
        <F.Link isDark={isDark} href='#'>Contact</F.Link>
        {isPhone ? (
          <></>
        ) : (
          <News href='#'>
             News
          </News>
        )}
      </F.Text>
    </F.Container>
  );
};