Update <Link> to be underlined by default

docs/Upgrade.md

@@ -18,6 +18,45 @@ If you previously relied on the fact that the rows were not clickable by default
 </Datagrid>
 ```
 
+## Links are now underlined by default
+
+In the default theme, links are now underlined by default. 
+
+If you use the `<Link>` component from `react-admin`, and you want to remove the underline, set the `underline` prop to `none`:
+
+```diff
+import { Link } from 'react-admin';
+
+const MyComponent = () => (
+-   <Link to="/foo">Foo</Link>
++   <Link to="/foo" underline="none">Foo</Link>
+);
+```
+
+Some react-admin component use `<Link>` under the hood, and will also render underlined links:
+
+- `<Count>`
+- `<EmailField>`
+- `<FileField>`
+- `<ReferenceField>`
+- `<ReferenceManyCount>`
+- `<UrlField>`
+
+`<SingleFieldList>` still disables the underline by default.
+
+To remove the underline in these components, use the `sx` prop. For instance, to remove the underline in `<ReferenceField>`:
+
+{% raw %}
+```diff
+const CompanyField = () => (
+-   <ReferenceField source="company_id" reference="companies" />
++   <ReferenceField source="company_id" reference="companies" sx={{
++      '& a': { textDecoration: 'none' }
++   }} />
+)
+```
+{% endraw %}
+
 ## Upgrading to v4
 
 If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5. 

examples/crm/src/companies/CompanyCard.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Paper, Typography, Link as MuiLink, Box } from '@mui/material';
+import { Paper, Typography, Box } from '@mui/material';
 import ContactsIcon from '@mui/icons-material/AccountCircle';
 import DealIcon from '@mui/icons-material/MonetizationOn';
-import { useCreatePath, SelectField, useRecordContext } from 'react-admin';
-import { Link } from 'react-router-dom';
+import {
+    useCreatePath,
+    SelectField,
+    useRecordContext,
+    Link,
+} from 'react-admin';
 
 import { sectors } from './sectors';
 import { CompanyAvatar } from './CompanyAvatar';
@@ -17,8 +21,7 @@ export const CompanyCard = (props: { record?: Company }) => {
     if (!record) return null;
 
     return (
-        <MuiLink
-            component={Link}
+        <Link
             to={createPath({
                 resource: 'companies',
                 id: record.id,
@@ -79,6 +82,6 @@ export const CompanyCard = (props: { record?: Company }) => {
                     </Box>
                 </Box>
             </Paper>
-        </MuiLink>
+        </Link>
     );
 };

examples/crm/src/dashboard/DealsChart.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Box, Link } from '@mui/material';
+import { Box } from '@mui/material';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
-import { useGetList } from 'react-admin';
+import { useGetList, Link } from 'react-admin';
 import { startOfMonth, format } from 'date-fns';
 import { ResponsiveBar } from '@nivo/bar';
 
@@ -89,7 +88,6 @@ export const DealsChart = () => {
                     underline="none"
                     variant="h5"
                     color="textSecondary"
-                    component={RouterLink}
                     to="/deals"
                 >
                     Upcoming Deal Revenue

examples/crm/src/dashboard/DealsPipeline.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Card, Link, Box } from '@mui/material';
+import { Card, Box } from '@mui/material';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import {
     useGetList,
     SimpleList,
     useGetIdentity,
+    Link,
     ReferenceField,
 } from 'react-admin';
 
@@ -50,7 +50,6 @@ export const DealsPipeline = () => {
                     underline="none"
                     variant="h5"
                     color="textSecondary"
-                    component={RouterLink}
                     to="/deals"
                 >
                     Deals Pipeline

examples/crm/src/dashboard/HotContacts.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Card, Box, Link } from '@mui/material';
+import { Card, Box } from '@mui/material';
 import ContactsIcon from '@mui/icons-material/Contacts';
-import { useGetList, SimpleList, useGetIdentity } from 'react-admin';
+import { useGetList, Link, SimpleList, useGetIdentity } from 'react-admin';
 import { formatDistance } from 'date-fns';
 
 import { Avatar } from '../contacts/Avatar';
@@ -33,7 +32,6 @@ export const HotContacts = () => {
                     underline="none"
                     variant="h5"
                     color="textSecondary"
-                    component={RouterLink}
                     to="/contacts"
                 >
                     Hot contacts

examples/demo/src/orders/OrderEdit.tsx

@@ -5,6 +5,7 @@ import {
     Edit,
     Form,
     Labeled,
+    Link as RaLink,
     PrevNextButtons,
     ReferenceField,
     SelectInput,
@@ -13,7 +14,6 @@ import {
     useRecordContext,
     useTranslate,
 } from 'react-admin';
-import { Link as RouterLink } from 'react-router-dom';
 import { Card, CardContent, Box, Grid, Typography, Link } from '@mui/material';
 
 import { Order, Customer } from '../types';
@@ -41,25 +41,13 @@ const OrderTitle = () => {
 const CustomerDetails = () => {
     const record = useRecordContext<Customer>();
     return (
-        <div>
-            <Typography
-                component={RouterLink}
-                color="primary"
-                to={`/customers/${record?.id}`}
-                style={{ textDecoration: 'none' }}
-            >
+        <Typography>
+            <RaLink to={`/customers/${record?.id}`}>
                 {record?.first_name} {record?.last_name}
-            </Typography>
+            </RaLink>
             <br />
-            <Typography
-                component={Link}
-                color="primary"
-                href={`mailto:${record?.email}`}
-                style={{ textDecoration: 'none' }}
-            >
-                {record?.email}
-            </Typography>
-        </div>
+            <Link href={`mailto:${record?.email}`}>{record?.email}</Link>
+        </Typography>
     );
 };
 

examples/demo/src/products/ProductRefField.tsx

@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { Link as MuiLink } from '@mui/material';
-import { useRecordContext } from 'react-admin';
+import { useRecordContext, Link } from 'react-admin';
 import { Product } from '../types';
 
 const ProductRefField = () => {
     const record = useRecordContext<Product>();
     return record ? (
-        <MuiLink
-            component={Link}
-            to={`/products/${record.id}`}
-            underline="none"
-        >
-            {record.reference}
-        </MuiLink>
+        <Link to={`/products/${record.id}`}>{record.reference}</Link>
     ) : null;
 };
 

examples/demo/src/reviews/ReviewItem.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import { Fragment } from 'react';
-import {
-    ListItem,
-    ListItemAvatar,
-    ListItemText,
-    Link as MuiLink,
-} from '@mui/material';
-import { Link } from 'react-router-dom';
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 import {
     useCreatePath,
     ReferenceField,
     FunctionField,
+    Link,
     TextField,
     useRecordContext,
 } from 'react-admin';
@@ -25,13 +20,12 @@ export const ReviewItem = () => {
         return null;
     }
     return (
-        <MuiLink
+        <Link
             to={createPath({
                 resource: 'reviews',
                 type: 'edit',
                 id: record.id,
             })}
-            component={Link}
             underline="none"
             color="inherit"
         >
@@ -77,6 +71,6 @@ export const ReviewItem = () => {
                     secondaryTypographyProps={{ noWrap: true }}
                 />
             </ListItem>
-        </MuiLink>
+        </Link>
     );
 };

packages/ra-ui-materialui/src/Link.tsx

@@ -16,7 +16,6 @@ export const Link = (props: LinkProps) => {
             component={RRLink}
             to={to}
             className={clsx(LinkClasses.link, className)}
-            underline="none"
             {...rest}
         >
             {children}