styled-component props 不适用于 css

Posted 2023-03-15

【中文标题】styled-component props 不适用于 css

【英文标题】：styled-component props is not applied to css

【发布时间】：2020-03-19 22:03:07

【问题描述】：

我正在传递一个道具来控制文本的不透明度，我可以看到该道具已传递，但不知何故它不适用于 CSS 部分。这是代码

import React from 'react'
import  NavLink  from 'react-router-dom'
import styled from 'styled-components'

//——*——*——*——*——*——//
const Logo = props => 
  const  hide  = props
  return (
    <StyledLogo>
      <LogoGroup>
        <NavLink to="/" className="logo">
          seungmee leehide
        </NavLink>

        <HideText>
          &nbsp;is <br />
          an experience designer, <br />
          creating and visualizing new experiences
        </HideText>
      </LogoGroup>
    </StyledLogo>
  )


const StyledLogo = styled.div`
  width: 100vw;
  background-color: transparent;
  color: white;
  z-index: 999;


  & p:hover 
    opacity: 1;
  

  & .logo 
    font-weight: 600;
    float: left;
    font-size: 1.2em;
    z-index: 100;
  
`
const LogoGroup = styled.div`
  position: absolute;
  top: 3vw;
  left: 3vw;
`

const HideText = styled.p`
  font-size: 1.2em;
  transition: 0.4s;
  opacity: $props => props.hide;
`
export default Logo

import React from 'react'
// import  BrowserRouter as Router, Route  from 'react-router-dom'
// 1. Dependencies
// 2. Components
// 3. for style
import  Tab, Tabs, TabList, TabPanel  from 'react-tabs'
import styled from 'styled-components'
import WorksCard from '../components/WorksCard'
import Logo from '../components/Logo'
import WORKLIST from '../screens/work-list.json'
import EXPERIMENTLIST from '../screens/experiment-list.json'

// 4. Static Resources

//——*——*——*——*——*——//

const Works = () => 
  return (
    <div>
      <Logo hide=0.5 />
      <StyledWorks>
        .......
      </StyledWorks>
    </div>
  )

.....

export default Works

我可以通过将'hide'的值包含在文本中来测试它是否被传递，但是当我在这里使用它时>> opacity: $props => props.hide;它不适用于实际的 CSS。

我不确定是什么导致了这个问题。这似乎是一个基本问题，但是当我检查类似的问题时我无法弄清楚。

【问题讨论】：

你试过了吗：

【参考方案1】：

您必须向标签发送道具。喜欢，

<HideText hide=hide>
   &nbsp;is <br />
   an experience designer, <br />
   creating and visualizing new experiences
</HideText>

FIR：道具通过标签发送

【讨论】：

非常感谢！没想到！！