Как мне можно сдвинуть кнопку?

Question

Я новичок, поэтому чтобы разобраться спрашиваю все что мне непонятно.

    function App () { 
      return(
        <Button variant='primary'>123</Button>
      );
    }

Как мне сдвинуть кнопку? Как я понял, это делается через стили, но как кнопке задать стиль?

     import React from 'react';
import { Nav, Navbar, Button } from 'react-bootstrap'
import { Link } from 'react-router-dom';
import './Navibar.css'

export default function Navibar() {
    return (
    <>
            <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
                <Navbar.Brand>123</Navbar.Brand>
                <Navbar.Toggle aria-controls='responsive-navbar-nav' />
                <Navbar.Collapse id='responsive-navbar-nav'>
                    <Nav className='mr-auto'>
                        <Nav.Link>Home</Nav.Link>
                        <Nav.Link>Users</Nav.Link>
                        <Nav.Link>Che</Nav.Link>
                    </Nav>
                    <Nav>
                        <Button variant='dark' class='my-button'>LogIn</Button>
                        <Button variant='dark'>Sign Out</Button>
                    </Nav>
            </Navbar.Collapse>
        </Navbar>
    </>
    )}

файл navibar.css

.my-button {
    appearance: none;
  border: 0;
  border-radius: 5px;
  background: #7ec423;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
}

Answer 1

Можете задать атрибут style

function App () { 
    return(
      <button variant='primary' style="здесь уже ваши стили"></button>
    );
}

Но я бы добавил класс CSS, а уже в файле CSS хранил бы стили:

function App () { 
    return(
      <button variant='primary' class="my-button"></button>
    );
}

БЛОГ НА HUSL

Как мне можно сдвинуть кнопку?

Ответы (1 шт):