Merge pull request #5918 from WiXSL/usermenu-css

Added global css override key to UserMenu component
marmelab · Feb 16, 2021 · ff9c427 · ff9c427
2 parents f3f1014 + 19d85bc
commit ff9c427
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/docs/Buttons.md b/docs/Buttons.md
@@ -334,5 +334,24 @@ To override the style of all instances of `<Button>` using the [material-ui styl
 
 ### `<RefreshButton>`
 ### `<SkipNavigationButton>`
+
+#### CSS API
+
+| Rule name             | Description                                     |
+| --------------------- | ----------------------------------------------- |
+| `skipToContentButton` | Applied to the underlying `MuiButton` component |
+
+To override the style of all instances of `<SkipNavigationButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaSkipNavigationButton` key.
+
 ### `<MenuItemLink>`
 ### `<UserMenu>`
+
+#### CSS API
+
+| Rule name    | Description                                                                                                                              |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `user`       | Alternative to using `className`. Applied to the root element                                                                            |
+| `userButton` | Applied to the underlying `MuiButton` component when `useGetIdentity().loaded` is `true` and `useGetIdentity().identity.fullName` is set |
+| `avatar`     | Applied to the underlying `MuiAvatar` component when `useGetIdentity().avatar` is `true`                                                 |
+
+To override the style of all instances of `<UserMenu>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaUserMenu` key.
diff --git a/packages/ra-ui-materialui/src/layout/UserMenu.tsx b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
@@ -6,16 +6,19 @@ import { Tooltip, IconButton, Menu, Button, Avatar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 
-const useStyles = makeStyles(theme => ({
-    user: {},
-    userButton: {
-        textTransform: 'none',
-    },
-    avatar: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        user: {},
+        userButton: {
+            textTransform: 'none',
+        },
+        avatar: {
+            width: theme.spacing(4),
+            height: theme.spacing(4),
+        },
+    }),
+    { name: 'RaUserMenu' }
+);
 
 const UserMenu = props => {
     const [anchorEl, setAnchorEl] = useState(null);