[Avatar] Use styled-components

babel.config.js

@@ -27,7 +27,13 @@ const defaultAlias = {
   '@material-ui/utils': './packages/material-ui-utils/src',
 };
 
+const styledComponentsPlugin = [
+  'babel-plugin-styled-components',
+  { displayName: true, pure: true },
+];
+
 const productionPlugins = [
+  styledComponentsPlugin,
   '@babel/plugin-transform-react-constant-elements',
   'babel-plugin-transform-dev-warning',
   ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
@@ -42,6 +48,7 @@ const productionPlugins = [
 module.exports = {
   presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
   plugins: [
+    styledComponentsPlugin,
     'babel-plugin-optimize-clsx',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
@@ -57,6 +64,7 @@ module.exports = {
     },
     coverage: {
       plugins: [
+        styledComponentsPlugin,
         'babel-plugin-istanbul',
         [
           'babel-plugin-module-resolver',
@@ -69,6 +77,7 @@ module.exports = {
     },
     development: {
       plugins: [
+        styledComponentsPlugin,
         [
           'babel-plugin-module-resolver',
           {
@@ -95,6 +104,7 @@ module.exports = {
       sourceMaps: 'both',
       plugins: [
         [
+          styledComponentsPlugin,
           'babel-plugin-module-resolver',
           {
             root: ['./'],

docs/pages/components/avatars.js

@@ -10,6 +10,9 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
+// warm-up
+requireDemo.keys().map(requireDemo);
+
 export default function Page({ demos, docs }) {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }

package.json

@@ -77,6 +77,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-optimize-clsx": "^2.3.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-tester": "^9.0.0",
     "babel-plugin-transform-dev-warning": "^0.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",

packages/material-ui/package.json

@@ -59,7 +59,8 @@
     "popper.js": "^1.16.1-lts",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.0",
-    "react-transition-group": "^4.4.0"
+    "react-transition-group": "^4.4.0",
+    "styled-components": "^5.1.0"
   },
   "devDependencies": {},
   "sideEffects": false,

packages/material-ui/src/Avatar/Avatar.js

@@ -1,60 +1,24 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import styled from 'styled-components';
+import themed from '../styles/themed';
 import Person from '../internal/svg-icons/Person';
 
-export const styles = (theme) => ({
+export const styles = {
   /* Styles applied to the root element. */
-  root: {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    width: 40,
-    height: 40,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.pxToRem(20),
-    lineHeight: 1,
-    borderRadius: '50%',
-    overflow: 'hidden',
-    userSelect: 'none',
-  },
+  root: {},
   /* Styles applied to the root element if not `src` or `srcSet`. */
-  colorDefault: {
-    color: theme.palette.background.default,
-    backgroundColor:
-      theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
-  },
+  colorDefault: {},
   /* Styles applied to the root element if `variant="circle"`. */
   circle: {},
   /* Styles applied to the root element if `variant="rounded"`. */
-  rounded: {
-    borderRadius: theme.shape.borderRadius,
-  },
+  rounded: {},
   /* Styles applied to the root element if `variant="square"`. */
-  square: {
-    borderRadius: 0,
-  },
-  /* Styles applied to the img element if either `src` or `srcSet` is defined. */
-  img: {
-    width: '100%',
-    height: '100%',
-    textAlign: 'center',
-    // Handle non-square image. The property isn't supported by IE 11.
-    objectFit: 'cover',
-    // Hide alt text.
-    color: 'transparent',
-    // Hide the image broken icon, only works on Chrome.
-    textIndent: 10000,
-  },
+  square: {},
   /* Styles applied to the fallback icon */
-  fallback: {
-    width: '75%',
-    height: '75%',
-  },
-});
+  fallback: {},
+};
 
 function useLoaded({ src, srcSet }) {
   const [loaded, setLoaded] = React.useState(false);
@@ -91,17 +55,60 @@ function useLoaded({ src, srcSet }) {
   return loaded;
 }
 
+const StyledComponent = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: ${({ theme }) => theme.typography.pxToRem(20)};
+  line-height: 1;
+  border-radius: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'rounded':
+        return `${theme.shape.borderRadius}px`;
+      case 'square':
+        return '0px';
+      default:
+        return '50%';
+    }
+  }};
+  overflow: hidden;
+  user-select: none;
+`;
+
+const AvatarImage = styled.img`
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  /* Handle non-square image. The property isn't supported by IE 11. */
+  object-fit: cover;
+  /* Hide alt text. */
+  color: transparent;
+  /* Hide the image broken icon, only works on Chrome. */
+  text-indent: 10000px;
+`;
+
+const Fallback = styled(Person)`
+  width: 75%;
+  height: 75%;
+`;
+
 const Avatar = React.forwardRef(function Avatar(props, ref) {
   const {
     alt,
     children: childrenProp,
-    classes,
+    classes = {},
     className,
-    component: Component = 'div',
+    component = 'div',
     imgProps,
     sizes,
     src,
     srcSet,
+    theme,
     variant = 'circle',
     ...other
   } = props;
@@ -115,12 +122,13 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
 
   if (hasImgNotFailing) {
     children = (
-      <img
+      <AvatarImage
         alt={alt}
         src={src}
         srcSet={srcSet}
         sizes={sizes}
         className={classes.img}
+        theme={theme}
         {...imgProps}
       />
     );
@@ -129,11 +137,12 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
   } else if (hasImg && alt) {
     children = alt[0];
   } else {
-    children = <Person className={classes.fallback} />;
+    children = <Fallback className={classes.fallback} theme={theme} />;
   }
 
   return (
-    <Component
+    <StyledComponent
+      as={component}
       className={clsx(
         classes.root,
         classes.system,
@@ -143,11 +152,13 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
         },
         className,
       )}
+      hasImgNotFailing={hasImgNotFailing}
       ref={ref}
+      theme={theme}
       {...other}
     >
       {children}
-    </Component>
+    </StyledComponent>
   );
 });
 
@@ -166,7 +177,7 @@ Avatar.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -194,10 +205,11 @@ Avatar.propTypes = {
    * Use this attribute for responsive image display.
    */
   srcSet: PropTypes.string,
+  theme: PropTypes.any.isRequired,
   /**
    * The shape of the avatar.
    */
   variant: PropTypes.oneOf(['circle', 'rounded', 'square']),
 };
 
-export default withStyles(styles, { name: 'MuiAvatar' })(Avatar);
+export default themed({ component: Avatar, name: 'MuiAvatar' });

packages/material-ui/src/styles/themed.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import useTheme from './useTheme';
+
+export default function themed({ component: Component, name }) {
+  function StyledComponent(props) {
+    const theme = useTheme();
+    const defaultProps = theme?.props[name];
+
+    // TODO theme?.overrides[name]
+
+    return <Component theme={theme} {...defaultProps} {...props} />;
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    StyledComponent.displayName = name;
+  }
+
+  return StyledComponent;
+}

yarn.lock

@@ -3862,15 +3862,15 @@ babel-plugin-react-remove-properties@^0.3.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"
   integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==
 
-"babel-plugin-styled-components@>= 1":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
-  integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
+  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-module-imports" "^7.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.10"
+    lodash "^4.17.11"
 
 [email protected], babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
@@ -15706,7 +15706,7 @@ style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-styled-components@^5.0.0:
+styled-components@^5.0.0, styled-components@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.0.tgz#2e3985b54f461027e1c91af3229e1c2530872a4e"
   integrity sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==