How I can remove list style from UnorderedList?

[tomtobac]

I am trying to apply my custom styles to the UnorderedList component but i'm not able to do it...

Codesandbox example: https://codesandbox.io/s/paste-starter-kit-forked-9wxy9?file=/src/index.tsx

const StyledUnorderedList = styled(UnorderedList)(() => ({
	listStyleType: 'none',
	marginBottom: 0,
	marginLeft: 0,
}));
// ... render
<StyledUnorderedList>
  <ListItem> +1 415-555-0100</ListItem>
  <ListItem> +1 (510) 555-0101</ListItem>
  <ListItem> +19255550102</ListItem>
  <ListItem> 16505550103</ListItem>
</StyledUnorderedList>

Screenshot:

[kate-porter]

Hi @tomtobac - thanks for sharing a code sandbox example. Our components do not support custom styling. All styling is controlled via props that are exposed on each component.

Instead of using the UnorderedList for this, I'd recommend composing it using the Text primitive, which has many more styling props for you to work with.

Let me know if that seems like it will work for you, and please reach out if you have any questions about how to work with the Text primitive!

[tomtobac]

Ok, thanks @katieporter I will use Text component