emotionを使用したstyled-componentsによる上書き

Question

reactによるフロントエンド開発をしています。
emotionのstyled-components記法を用いているのですが、他のコンポーネントでstyleを上書きしても反映されません。ソースコードは以下になります。

上書きされるコンポーネント

import React from 'react'
import { Button } from '@mui/material'
import styled from '@emotion/styled'

type Props = {
    children: string;
    onClick: VoidFunction;
}

const BaseButton: React.FC<Props> = (props) => {
  const { children, onClick} = props;

  return (
      <StyledButton 
        variant="outlined" 
        onClick={onClick}>
          {children}
      </StyledButton>
  )
}

export default BaseButton

const StyledButton = styled(Button)({
    margin: '15px',
    fontSize: '1.6em',
  })

上書きをしているコンポーネント

import React from 'react'
import styled from '@emotion/styled'
import BaseButton from '../Atom/Button/BaseButton'
import { useNavigate } from 'react-router-dom'

const MainButton = () => {

  const navigate = useNavigate()
  const toList = () => {navigate('/List')}

  return (
    <div>
      <SButton size="large" onClick={toList}>リスト</SButton>
    </div>
  )
}

export default MainButton

const SButton = styled(BaseButton)({
  color: 'black',
})

この場合、ボタンの色が黒色に変わらず、元のコンポーネントのボタンが表示されます。
ご回答のほどよろしくお願いいたします。

Answer 1

BaseButtonコンポーネントのStyledButtonにclassNameをつけたことで解決できました。
https://emotion.sh/docs/styled