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

Posted 2023-02-22

【中文标题】边框半径未应用于具有嵌套 Sass 的 React 组件

【英文标题】：border-radius not being applied to React Component with nested Sass

【发布时间】：2016-09-12 10:31:26

【问题描述】：

我正在尝试使用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= />*/
                    </div>
                    <div className="instragram-caption">
                        <p>
                             this.props.caption 
                        </p>
                    </div>
                </div>
            </div>
        );
    

【参考方案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 

        
    

【讨论】：

我在 instagram-username 类中有 2 个 a 标签。它会将样式应用于两者？我也尝试了你的更改，但它们没有工作=[

给它一个类，或者使用一个选择器来只定位第一个标签。此外，您的班级名称拼写错误。