[material-ui][Divider] Convert to support CSS extraction

[sai6855]

part of #41273

preview: https://deploy-preview-41366--material-ui.netlify.app/material-ui/react-divider

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-41366--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 0db3b6e

[sai6855]

@siriwatknp ran following commands to render demos locally but facing following error

1. pnpm build
2. cd apps/pigment-next-app
3. pnpm install && pnpm dev

[siriwatknp]

Suggested change

	props: ({ ownerState }) =>
	ownerState.variant === 'middle' && ownerState.orientation === 'horizontal',
	props: { variant: 'middle', orientation: 'horizontal' },

I think object comparison should be used if possible. It's shorter and more readable.

x the others.

[siriwatknp]

Suggested change

	props: ({ ownerState }) => ownerState.children,
	props: ({ ownerState }) => !!ownerState.children,

should explicitly return boolean.

[siriwatknp]

Note: in v7, this could be replaced with pseudo :not(:empty)

[siriwatknp]

@sai6855 flexDirection was not the inside psuedo selector, could you recheck if this is the correct change?

[sai6855]

Opps sorry, fixed in this commit 0b39bba

[siriwatknp]

I encounter an error after running pnpm dev in the pigment-next-app. It's because of Divider.muiSkipListHighlight, let me find a solution.

[siriwatknp]

👍 Thanks!