How to update styles of styled-components after request in API?

Question

JavaScript

Hey!
I can not understand why the styles are not updated through styled-component.
The code is this:
Parent, returns a list of elements during a request to the API:

class PokeCont extends Component {

  shouldComponentUpdate(nextProps) {
    if (this.props.pokemons !== nextProps.pokemons) {
      return true;
    }
  }

  render() {
    return (
      <PokeContainer>
        { this.props.pokemons.map(pokemon => <PokeCard key={pokemon.id} {...pokemon} />) }
      </PokeContainer>
    );
  }
}

Child of parent PokeCont:

import { Name } from './styles/PokeStyles';

const PokeCard = ({id, name, type}) => {
  return (
    <Card>
      <Name name={name}>
          {name.toUpperCase()}
      </Name>
    </Card>
  );
};

Styles for :

import styled from 'styled-components';

export const Name = styled.p`
  border: 1px solid yellow;
  background-color: ${(props) => 
    props.name ? 'black' : 'pink'}
`;

In my opinion, every time a child is rendered, it should update its props, thus pulling the styled-component and updating the styles, but this does not happen and I can not understand why. Help!