边框半径未应用于具有嵌套 Sass 的 React 组件

Question

我正在尝试使用border-radius: 50% 将instagram-profile-picture 变成一个圆圈。我没有看到我的更改适用于我当前的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 {

        }
    }
}