Question

我正在学习反应，我无法查明为什么这种内联样式无法在我的组件上工作。我的代码：

  render() {
    const style = {
      backgroundColor: 'black',
      font: 'inherit', 
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    };
    return (
      <div className="App">
        <UserOutput
         style={style} />
      </div>
    );
  }

如果有帮助，这是组件js：

import React from 'react';

const UserOutput = (props) => {
  return(
    <div>
      <p>E plurabis unwhatever</p>
      <p>same thing but different. My name is {props.name}</p>
    </div>
  )
}

export default UserOutput;

我已经设置了所有导入，并且组件网在DOM中可见，并且也接受原型。有什么建议么？

Answer 1

您不使用传入的样式道具，需要将其传递给您要样式化的元素

const UserOutput = (props) => {
  return (
    <div style={props.style}>
      <p>E plurabis unwhatever</p>
      <p>same thing but different. My name is {props.name}</p>
    </div>
  )
}

反应内联样式不适用于元素

1 个答案: