Function classAndStyle

Combines a Styles object with an optional default class and default CSSProperties to produce a pair { style, className }. A user-defined class name in s replaces the default class. Each individual style in s can replace individual styles in defaultStyle, but non-conflicting styles are merged.

This function can also be used to simply convert { style, className, ... } to { style, className }, removing additional properties. Components that accept Styles can use this method to easily set their class/style, e.g.

 export function MyComponent(p: Styles & { children: React.ReactNode; }) {
     const styles = useStyles();
     return (<div {...classAndStyle(p, styles.mycomp)}>{p.children}</div>);
 }

Using the Styles type, it is straightforward to allow components to change styles in grandchildren elements, e.g. the onTable and onTableBody props in this example:

 export function WrappedTable(p: Styles & { 
     children: React.ReactNode;
     onTable?: Styles;
     onTableBody?: Styles;
 }) {
     const styles = useStyles();
     return (
         <div {...classAndStyle(p, styles.container)}>
             <Table {...classAndStyle(p.onTable, styles.table)}>
                 <TableBody {...classAndStyle(p.onTableBody)}>
                     {p.children}
                 </TableBody>
             </Table>
         </div>
     );
 }

In this example, TableBody is a MUI component that accepts className and style (but not class). Given a child component that accepts Styles, you can write <Child {...p.onChild}/> rather than <Child {...classAndStyle(p.onChild)}/>.