Question

我使用styled-components

在盖茨比的'重新设计'组件方面遇到了一些问题

"styled-components": "^3.3.0" "gatsby-plugin-styled-components": "^2.0.11"

我的gatsby-plugin-styled-components中已经gatsby-config了，当我再次通过styled()添加自定义组件时，样式在所有栏上工作：

我在这里设有侧栏

import React, { Component } from "react";
import styled from "styled-components";

class Aside extends Component {
  render() {
    return (
      <Sidebar>
        <List>
          <Item>Pintrest 1</Item>
          <Item>Pintrest 2</Item>
          <Item>Pintrest 3</Item>
        </List>
      </Sidebar>
    );
  }
}

const Sidebar = styled.div`
  position: absolute;
  width: 200px;
  left: calc(100% + 20px);

  @media (max-width: 1200px) {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
  }
`;

在一个页面上，我想要样式top: 0;，所以我将其传递给

const SideBar = styled(Aside)`
  top: 0;
`;

import React from 'react'
import Helmet from 'react-helmet'
import Link from 'gatsby-link'
import get from 'lodash/get'
import styled from "styled-components";

import Bio from '../components/Bio'
import Aside from '../components/Aside';

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
    const { previous, next } = this.props.pathContext

    return (
      <div>
        <Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
        <Bio />
        <Post>
          <h1>{post.frontmatter.title}</h1>
          <SideBar/>
        </Post>
      </div>
    )
  }
}

甚至尝试过

const aside = ({className}) => <Aside className={className}/>;

const SideBar = styled(aside)`
  top: 0;
`;

如图所示

https://www.styled-components.com/docs/basics#styling-any-components

但它不起作用并且没有改变风格这是对lib gatsby-plugin-styled-components或样式组件的限制，还是我误解了styled-components的目的

Answer 1

要像在链接的示例中那样执行此操作，您需要将className prop传递给子节点，如下所示：

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Simple Accordion</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>
         
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      
	
<script>$('.collapsible-header').collapsible({
    inDuration: 5000,
    outDuration: 5000
});
</script>
</body>
</html>

样式组件不重新组件

1 个答案: