Question

我正在尝试使用instagram-profile-picture将border-radius: 50%变成一个圆圈。我没有看到我的更改与我当前的Sass一起使用，我不知道为什么。我检查了我的检查员，班级准确。我尝试将Sass从嵌套的Sass中取出（instagram-profile-picture本身），这似乎有效，但我想知道为什么border-radius在嵌套时不起作用我看到的是一个正方形。

萨斯：

.instagram-cell-container {
    .instagram-text {
        padding: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        .instagram-username {
            .instagram-profile-picture {
                border-radius: 50%;
            }
        }
        .instagram-caption {

        }
        .instagram-likes {

        }
    }
}

反应组件：

class InstagramCell extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };

    }

    render() {
        return (
            <div className="instagram-cell-container">
                <div className="instagram-img">
                    <a href={ this.props.link }>
                        <img src={ this.props.image } />
                    </a>
                </div>
                <div className="instragram-text">
                    <div className="instagram-username">
                        <a href={ this.props.link }>
                            <img src={ this.props.profile_picture } className="instagram-profile-picture" alt={ this.props.username }/>
                        </a>
                        <a href={ this.props.link }>
                            { this.props.username }
                        </a>
                    </div>
                    <div className="instragram-likes">
                        <p>{ this.props.likes }</p>
                        {/*<img src={} alt="likes"/>*/}
                    </div>
                    <div className="instragram-caption">
                        <p>
                            { this.props.caption }
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

将这些属性应用于图像是不可行的，您应该将它们应用于父容器。

.instagram-cell-container {
    .instagram-text {
        padding: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        .instagram-username {
            a {
                display: block;
                border-radius: 50%;
            }
        }
        .instagram-caption {

        }
        .instagram-likes {

        }
    }
}

border-radius未应用于具有嵌套Sass的React Component

1 个答案: