CODEWITHSUNDEEP
reactjsstyled-components
Zoltan Kurtyak
Zoltan Kurtyak

Reputation: 123

Is there a way to declare styled component with different main elements?

I need to create 2 similar styled components, which will share their styling but use different HTML element.

There is a way to do in runtime with "as" property (), but I have a specific exports which I need to use the default but I need for it to be in a way without using it so the Link styled component be a "styled.a" and StyledLink component to be "styled.span", I tried to do something like:

export const StyledLink = styled.span(`
  color: ${props => props.theme.colors.mainLinkColor};;
  text-decoration: underline;

  &:hover {
    color: ${props => props.theme.colors.textAccent};
    text-decoration: underline;
  }
`);

export const Link = <StyledLink as={RRLink} />;

That is obviously not working... So is there a way for a Link to mimic StyledLink styles but use an "a" tag instead of "span"?

Upvotes: 1

Views: 252

Answers (1)

Eric Bergh
Eric Bergh

Reputation: 61

Simply import and use css from styled-components like so:

import React from "react";
import ReactDOM from "react-dom";
import styled, { css } from 'styled-components';

const sharedStyles = css`
  background-color: gold;
`;

const Div = styled.div`
  ${sharedStyles}

`;

const Button = styled.button`
  ${sharedStyles}
`;

const App = () => (
  <>
  <Div>Hello Div</Div>
  <Button>Hello Button</Button>
  </>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 2

Related Questions