Как передать реквизиты компонента React стилизованному компоненту

Question

Я пытаюсь установить высоту стилизованного компонента на основе props компонента React, в котором он находится.

Я попробовал следующее:

const Styled = styled.div`
    height: ${props => props.height}
`

class Parent extends React.Component {
  render() {
      return (
          <Styled height={this.props.height}/>
      )
  }
}

Но как-тоне работаетКто-нибудь может мне помочь?Какова лучшая практика для того, что я пытаюсь сделать?

Answer 1

Синтаксис у вас работает просто отлично.Я подозреваю, что проблема заключается в значении height.Я подозреваю, что это не работает, потому что вы указываете целое число, например 200, а не действительную строку высоты CSS, такую ​​как 200px.

Вот простой пример, который работает:

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Styled = styled.div`
  height: ${props => props.height};
  background-color: blue;
  color: white;
`;

function App() {
  return (
    <Styled className="App" height="200px">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </Styled>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);