为什么内联样式 style={{maxHeight:'443 px', maxWidth: '443 px'}} 在组件中不起作用

Question

Tysm 提前求助！
我正在做 Coursera 的著名反应课程！
IN App.js 菜单呈现为组件。 MenuComponent.js如下：

import React,{Component} from 'react';
import DishDetail from './DishDetail';
import { Card, CardImg,  CardImgOverlay} from 'reactstrap';
class Menu extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedDish: null
        }
    }

    onDishSelect(dish) {
        this.setState({ selectedDish: dish});
    }

    renderDish() {
        if (this.state.selectedDish)
            return <DishDetail dish={this.state.selectedDish} />;
        else
            return(
                <div></div>
            );
    }

    render() {        
        const menu = this.props.dishes.map((dish) => {
            return (            
                <Card 
                    key={dish.id} 
                    className="col-12 col-md-5 m-1" 
                    onClick={() => this.onDishSelect(dish)}
                    >
                    <CardImg width="100%" className="card-img-top" src={dish.image} alt={dish.name} />
                    <CardImgOverlay className="card-image-overlay">
                        <h5>{dish.name}</h5>                      
                    </CardImgOverlay>
                </Card>                
            );
        });
        
        return (
            <div className="container">
                <div className="row">                     
                    {menu}                          
                </div>
                <div className="row">
                    <div classNmae="col-12 col-md-5 m-1">
                        {this.renderDish(this.state.selectedDish)}
                    </div>
                </div>
            </div>
        );
    }
}
export default Menu;

DishDetail.js如下：

import React, { Component } from 'react';
import { Card, CardImg,  CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
    
    render () {
        return (<div className="row">
                <div classname="col-6 col-md-4" >
                    <Card>
                        <CardImg style={{maxWidth:'443 px', maxHeight:'443 px'}} top src={this.props.dish.image} alt={this.props.dish.name} />
                        <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText className="text-center">{this.props.dish.description}</CardText>
                        </CardBody>
                    </Card>
                </div>                  
                <div className="col-6 col-md-4">
                    <h3>Comments</h3>
                    {
                        this.props.dish.comments.map( (comment) => {
                            return (
                                <div id={comment.id}>
                                    <p>{comment.comment}</p>
                                    <p>--{comment.author} , {comment.date}</p>
                                </div>
                            )
                        })
                    }    
                </div>
                </div>                                            
        );
    }
}
export default DishDetail;

我想要渲染 Dish Detail，它的注释形式为 col-6 col-6 并排表示。但取而代之的是，我得到的输出如下：-

期望的输出如下：

提早解决的tysm！

Answer 1

尝试这样使用它：

import React, { Component } from 'react';
import { Card, CardImg,  CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
    
    
    render () {
        const myStyle = {
          maxWidth:'443px',
          maxHeight:'443px'
        }
        return (<div className="row">
                <div classname="col-6 col-md-4" >
                    <Card>
                        <CardImg style={myStyle} top src={this.props.dish.image} alt={this.props.dish.name} />
                        <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText className="text-center">{this.props.dish.description}</CardText>
                        </CardBody>
                    </Card>
                </div>                  
                <div className="col-6 col-md-4">
                    <h3>Comments</h3>
                    {
                        this.props.dish.comments.map( (comment) => {
                            return (
                                <div id={comment.id}>
                                    <p>{comment.comment}</p>
                                    <p>--{comment.author} , {comment.date}</p>
                                </div>
                            )
                        })
                    }    
                </div>
                </div>                                            
        );
    }
}
export default DishDetail;

https://www.w3schools.com/react/showreact.asp?filename=demo2_react_css_inline_object

Answer 2

是一个443px单位，443和px之间没有space。否则，CSS 将不会应用于您选择的元素。

<Card>
  <CardImg
    style={{ maxWidth: "443px", maxHeight: "443px" }}
    top
    src={this.props.dish.image}
    alt={this.props.dish.name}
  />
  <CardBody>
    <CardTitle>{this.props.dish.name}</CardTitle>
    <CardText className="text-center">{this.props.dish.description}</CardText>
  </CardBody>
</Card>

再举一个例子，其中 10 px（space）单位将无法工作。

import React from 'react';
export default class App extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10 px", // check here not applied
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Demo on Sandbox

为什么内联样式 style={{maxHeight:'443 px', maxWidth: '443 px'}} 在组件中不起作用

Why Inline Styling style={{maxHeight:'443 px', maxWidth: '443 px'}} is not working in component

inline-styles

reactjs

react-bootstrap

bootstrap-4