Formatting Toolbar Buttons and Icons

[bensquire]

Firstly, thanks to the people answering all these questions, its greatly appreciated.

and on that note...

I would like provide my own toolbar button icons and control the styling of the buttons themselves ideally using StyledComponents, what's the best approach to doing this?

[bensquire]

So I've had some time to work with the toolbar and basically as far as I can tell there are a couple of things you can override.

1. The icon, by passing in another icon using the icon prop
2. The styling by passing in a css prop, for example:

// import { css } from 'styled-components'


<ToolbarMark
	type={getPlatePluginType(editor, MARK_BOLD)}
	icon={<FormatBold />}
	styles={{
		root: css`
			height: 26px;
			width: 26px;
			margin: 0 2px;

			&.slate-ToolbarButton-active,
			&.slate-ToolbarButton:hover {
				color: ${darkBlue};
			}
		`
	}}
/>

This is basically the same as the editor components, but it isn't specific in the documentation.

[zbeyens]

You can now own the components from v22 #2472