时间戳

首页 > 解决方案 > 为什么 styled-components 没有为整个组件设置样式？

reactjs - 为什么 styled-components 没有为整个组件设置样式？

问题描述

我是使用 react 来设计组件样式的新手，到目前为止，我是这样使用它的：

const Wrapper=styled.ul`//这里所有的css`
` 这里的所有 css 代码

但在这种情况下，我想为整个组件链接设置样式，而不必像这样包装它：

 
const StyledLinks = styled(links)`//这里所有的css`

为了检查它是否正常工作，我用它绘制了文本，color:red但它似乎不起作用，没有应用任何样式。我想这是非常愚蠢的事情，但非常感谢您的帮助！

谢谢！

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

标签： reactjsstyled-components

解决方案

我不得不重新写这个。哈哈。这是它应该看起来的样子：

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

推荐阅读