[React] semantic-ui Button 커스텀 하기

기본 사용

/* index.js */
import {Button} from "semantic-ui-react";

<Styles.BtnWrap>
    <Button basic onClick={() => location.href='/'}>
        홈 이동
    </Button>
    <Button secondary basic onClick={() => location.href='/'}>
        홈 이동
    </Button>
    <Button primary onClick={() => location.href='/'}>
        홈 이동
    </Button>
    <Button negative onClick={() => location.href='/'}>
        홈 이동
    </Button>
</Styles.BtnWrap>

 

커스텀

/* index.js */
import {Button} from "semantic-ui-react";

<Styles.BtnWrap>
    <Button className="btn-1" onClick={() => location.href='/'}>
        홈 이동
    </Button>
</Styles.BtnWrap>

/* style.js */

export const BtnWrap = styled.div.attrs(props => ({}))`
  margin-top: 25px;
  
  & .ui.button.btn-1 {
    color: #fff;
    padding: 5px 14px;
    border-radius: 4px;
    background-color: #484848;
  }
  
`;

.ui.button 은 semantic-ui button의 기본 css class 이므로, 이를 활용하여 커스텀 가능.

 

 

 

https://react.semantic-ui.com/elements/button/

Button - Semantic UI React