Inversion of Control(?)

with styled-components

					
const MyTable = styled.table`
	tbody > .MuiIconButton-root:hover {
		color: BlanchedAlmond;
	}
`
					
				

					
const Root = styled.table``
const Row  = styled.tr``

export default { Root, Row }
					
				

					
import MyTable from './MyTable';

<MyTable.Root>
	<MyTable.Head />
	<MyTable.Body>
		<MyTable.Row />
	</MyTable.Body>
</MyTable.Root>
					
				

				
import MyTable from './MyTable';

const ActionButton = styled(IconButton)`
	${MyTable.Body} &:hover {
		color: BlanchedAlmond;
	}
`
				
			

Disclaimer!

Not sure what the dealio is with Pigment CSS

Further reading

The styled-components Happy Path

Thoughts? Questions?