Why styled-components is not styling the whole component?

0
votes

I am new at styling components with react and so far I used it like this:

const Wrapper=styled.ul`//all the css here `
` all the css code here

But in this case I wanted to style the whole commponent links without having to wrap it like this:,

 
const StyledLinks = styled(links)`//all the css here`

and to check if it is working I painted text with color:red but it seems it is not working, no styles are being applied. I guess it is something very stupid but help would be very appreciate!

Thank you!

import React from "react"
import { Link } from "gatsby"
import styled from "styled-components"

const links = () => {
  return (
    <ul >
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/blog">Blog</Link>
      </li>
    </ul>
  )
}

const StyledLinks = styled(links)`
  color: red;
  display: flex;
  justify-content: space-around;
  width: 100%;
 
  a {
    text-decoration: none;
    color: red;
  }
`

export default StyledLinks
2
reactjsstyled-components

2 Answers

0
votes

I had to re-write this. LOL. This is the way it should look:

import React from "react"
import { Link } from "gatsby"
import styled from "styled-components"

const Links = () => {
return (
      <Ul >
       <li>
        <StyledLinks to="/">Home</StyledLinks>
      </li>
      <li>
        <StyledLinks to="/about">About</StyledLinks>
      </li>
      <li>
        <StyledLinks to="/blog">Blog</StyledLinks>
      </li>
    </Ul>
  )
}

const StyledLinks = styled(Link)`
  color: red;
  display: flex;
  justify-content: space-around;
  width: 100%;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
`;

const Ul = styled.ul`
list-style:none;
`;

export default Links
-1
votes

That is not the right syntax. You must wrap a single Link and render it instead, just like this:

import React from "react"
import { Link } from "gatsby"
import styled from "styled-components"

const Links = () => {
  return (
    <ul >
      <li>
        <StyledLinksto="/">Home</Link>
      </li>
      <li>
        <StyledLinksto="/about">About</Link>
      </li>
      <li>
        <StyledLinksto="/blog">Blog</Link>
      </li>
    </ul>
  )
}

const StyledLinks = styled(Link)`
  color: red;
  display: flex;
  justify-content: space-around;
  width: 100%;
  text-decoration: none;
`

export default Links

Style is for each Link