Question

我一直在努力通过样式组件从父组件样式化子组件下面是代码。我评论了我在哪里挣扎以及想要实现什么。styled-components文档无济于事。

Codesandbox链接： https://codesandbox.io/s/adoring-pare-exjjt?file=/src/App.js

    import React from 'react';
    import { render } from "react-dom";
    import styled from 'styled-components'
    import { Button, Grid ,Container} from 'semantic-ui-react'
    import PropTypes from 'prop-types'

    const mID = 'test'

    const StyledBlock = styled(Container)`
    {/*i don't want to style here */}

      /* height: 450px;
      background-color: #f7f7f7;
      @media only screen and (max-width: 767px) and (min-width: 320px) {
        height: 550px;
      } */
    `
    const StyledSection = styled.section`
      background: #ffffff;
      box-shadow: 0px 1px 0px #dfdfdf;
      margin: 12% 10% 10% 30%;
      height: 150px;
      width: 170px;
      @media only screen and (max-width: 767px) and (min-width: 320px) {
        margin: 10% 0 25% 25%;
        width: 172px;
      }
    `
    const Header = styled.h4`
      text-align: center;
      position: relative;
      top: 10%;
    `
    const StyledButton = styled(Button)`
      position: relative;
      bottom: -60px;
      margin: 0px;
      width: 100%;
      top: 9.32%;
    `

    const Report = (name) => {
      const handleClick = async (e) => {
        console.log(e)
      }

      return (
        <Grid.Column key={name} className={`${mID}_preview`}>
          <StyledSection>
            <Header>{name}</Header>
            <StyledButton secondary onClick={() => handleClick(name)} >
              Download
            </StyledButton>
          </StyledSection>
        </Grid.Column>
      )
    }

    const Reports = () => {
    return(
      <Container>
        <StyledBlock>
          <Grid>
            <Grid.Row>{["deen","john"].map((name) => Report(name))}</Grid.Row>
          </Grid>
        </StyledBlock>
      </Container>
    )}

    Reports.propTypes = {
      names: PropTypes.array,
      onlineShowId: PropTypes.number
    }

//below code is not able to pass css. don't see these css anywhere applied . why ?
    const StyledReports = styled(Reports)`
    background-color: yellow
     .${mID} {
        &_preview {
          color: red
        }
     }

     ${StyledBlock}{
      background-color: red
     }
    `

    render(<StyledReports />, document.getElementById("root"))

Answer 1

我想出了办法

您需要在这样的父组件上具有className

res %>% 
    group_by(expr) %>% 
    nest() %>% 
    mutate(model = map(data, ~lm(median ~ n, data = .x))) %>% 
    ungroup() %>% 
    transmute(expr, beta = map_dbl(model, ~coefficients(.x)[[2]]))

# A tibble: 3 x 2
#   expr        beta
#   <fct>      <dbl>
# 1 matchFun 0.00193
# 2 whichFun 0.00332
# 3 vec_repl 0.00122

如何通过样式化组件对父组件中的所有子组件进行样式设置

1 个答案: