मैं टैग किए गए टेम्पलेट लिटरल्स का उपयोग करके चाइल्ड स्टाइल वाले घटक में मूल घटक की स्थिति कैसे प्राप्त करूं?

आप ऐसा करते हैं कि प्रॉप्स वैल्यू को कस्टम स्टाइल में पास करके, उदाहरण के लिए:

const Container = styled.div`
  background-color: orange;
  width: 100px;
  height: ${props => props.customHeight + "px"}
`

पूर्ण उदाहरण:

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

const Container = styled.div`
  background-color: orange;
  width: 100px;
  height: ${props => props.customHeight + "px"}
`

export default function App() {
  const sizeWidth = 100;
  const [WHRatio, setWHRatio] = useState(1);

  const getContainerHeight = () => Math.floor(sizeWidth / WHRatio);

  const incWHRatio = () => setWHRatio(WHRatio + 1);

  return (
    <>
      <Container
        customHeight={getContainerHeight()} 
      ></Container>
      <button onClick={incWHRatio}>Inc WHRatio</button>
    </>
  );
}

इसके अलावा, आप सीएसएस सुविधा का उपयोग कर सकते हैं और इसे स्टाइल वाले घटक में भेज सकते हैं, अधिक विवरण और उदाहरणों के लिए आप इसे देख सकते हैं url .

उदाहरण 2:

import styled, { css, keyframes } from 'styled-components'

const animation = keyframes`
  0% {
    opacity: 0;
  }

  100 {
    opacity: 1;
  }
`

const animationRule = css`
  ${animation} 1s infinite alternate;
`

const Component = styled.div`
  animation: ${animationRule};
`

डेमो यूआरएल