He intentado todo y el radio del borde no funciona en esta imagen. Simplemente no reacciona a eso. He probado tanto % como px. La imagen reacciona a cualquier otro valor de CSS que pueda ver o las propiedades que paso en la etiqueta img en el componente. Todo, excepto border-radius. Se me acabaron las ideas.
Aquí está el componente:
import React from "react"; import { UserContainer, User, UserProfilePicture, UserProfileName, UserChevronIcon, } from "./User.style"; import Logo from "../../../images/ProfileFace.jpg"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; function UserProfile() { return ( <UserContainer> <User> <UserProfilePicture> <img src={Logo} height="50" width="50" border-radius="50px" /> -----> both px and % don't work </UserProfilePicture> <UserProfileName>Olivia Wilde</UserProfileName> <UserChevronIcon> <FontAwesomeIcon icon={faChevronDown} color="#7a7e7e" /> </UserChevronIcon> </User> </UserContainer> ); } export default UserProfile;Aquí está el componente con estilo:
import styled from "styled-components"; export const UserContainer = styled.div` height: 90%; width: 30%; margin: 0px; padding: 0px; background-color: inherit; color: white; display: flex; flex-direction: row; align-items: flex-end; `; export const User = styled.div` height: 70%; width: 100%; background-color: inherit; display: flex; text-align: end; justify-content: space-around; `; export const UserProfilePicture = styled.image` height: 50%; width: 50%; border-radius: 100px; -----> both px and % don't work display: flex; justify-content: center; align-items: center; `; export const UserProfileName = styled.div` height: 40%; width: 40%; color: #7a7e7e; font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: flex-start; `; export const UserChevronIcon = styled.div` height: 50%; width: 10%; display: flex; align-items: center; justify-content: flex-end; `;Puedes diseñarlo de la siguiente manera:
<img src={Logo} height="50" width="50" style={{borderRadius: '50%'}}/>Supongo que le gustaría hacer esa imagen redonda. Agregar un radio de borde de 100 px a una imagen de 50 px no funcionará. Utilice porcentaje en su lugar. Por ejemplo, para hacer que una imagen cuadrada parezca redonda, use el siguiente estilo:
border-radius: 50%;Si no funciona, es probable que otro estilo lo esté sobrescribiendo, así que intente con la etiqueta importante:
border-radius: 50% !important;Si eso también falla (¡podría sobrescribirse con otra etiqueta importante en algún lugar de su css) intente diseñarlo en línea:
<img src={Logo} height="50" width="50" style="border-radius: 50%" />