antd Button className style is not working-CodePudding

Facing issues using antd Button; need to align a button in right. Yes it works with style={{float:"right"}} but need to style it in className properties.

 <Button className={styles.myButtonOne} type="default" htmlType="button"> My Button</Button>

.myButtonOne {
    float: right;
}

this is not working though used float left in myButtonOne. But following code working fine:

 <Button style={{float:'right'}} type="default" htmlType="button"> My Button</Button>

Need to use styles in className.

CodePudding user response：

According to one comment by @Layhout, there is no className property on Button so you can wrap the button in a div and give that div the className={styles.myButtonOne}

CodePudding user response：

import React from 'react'
import { Button } from 'antd'
import styled from 'styled-components'

const StyledButton = styled.div`
  & .my-btn {
    float: right;
  }
`

const Page = () => {
  return (
    <StyledButton>
      <Button className="my-btn" type="default" htmlType="button">
        My Button
      </Button>
    </StyledButton>
  )
}

export default Page