React Material UI User Avatar

UserAvatar.css

.UserAvatar {
    --UserAvatarColor: #000;
    --UserAvatarSize: 40px;
    position: relative;
    border-radius: 100%;
    text-align: center;
    background-color: var(--UserAvatarColor);
    font-size: var(--UserAvatarSize);
    height: var(--UserAvatarSize);
    width: var(--UserAvatarSize);
}

.UserAvatar .UserAvatar__Avatar {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.UserAvatar .UserAvatar__Name {
    position: absolute;
    top: 0;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: .45em;
}

UserAvatar.js

import React, {Component} from 'react'
import Avatar from 'material-ui/Avatar'
import randomMaterialColor from 'random-material-color'
import './UserAvatar.css'

export default class UserAvatar extends Component {

    namePrefix: null;

    getNamePrefix(firstName, lastName) {
        return (firstName.substr(0, 1) + lastName.substr(0, 1)).toUpperCase();
    }

    getColor(namePrefix) {
        return randomMaterialColor.getColor({text: namePrefix});
    }

    render() {

        let {
            firstName,
            lastName,
            image = null,
            size = null,
        } = this.props;

        let namePrefix = this.getNamePrefix(firstName, lastName);

        let style = {
            '--UserAvatarColor': this.getColor(namePrefix),
        };
        if (size) {
            style['--UserAvatarSize'] = size+'px';
        }

        return <div className="UserAvatar" style={style}>
            <Avatar src={image} alt={firstName + ' ' + lastName} className="UserAvatar__Avatar"/>
            <div className="UserAvatar__Name">{namePrefix}</div>
        </div>;
    }
}