樣式組件道具不適用於 css

Question

我正在傳遞一個道具來控制文本的不透明度，我可以看到道具被傳遞了，但不知何故它不適用於 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 lee{hide}
        </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。

我不確定是什么導致了這個問題。 這似乎是一個基本問題，但我在檢查類似問題時無法弄清楚。

Answer 1

您必須將道具發送到標簽。 喜歡，

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

FIR：道具通過標簽發送