我的代碼有問題。我有一個簡單的增量減量應用程序。這個值被包裝在一個p標記中，問題是當我增加/減少p標記時，它一直在抖動，好像它試圖為自己騰出空間，盡管我已經嘗試給它更多的寬度。 提前感謝！:)

Stitches.jsx:

import React from 'react'
import './scss/Stitches.scss'

export const Stitches = ({ stitches, addStitches, removeStitches, resetStitches }) => {
return (
    <div className='stitches-wrapper'>
        <div className="stitch-count">
            <p>Stitches: {stitches}</p>
        </div>
        <div className="buttons-div">
            <button onClick={addStitches}>Add</button>
            <button onClick={removeStitches}>Remove</button>
            <button onClick={resetStitches}>Reset</button>
        </div>
    </div>
 )
}

縫線. scss:

.stitches-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
width: 100%;

.stitch-count {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;

    p {
        text-align: center;
        outline: 1px solid red;
        width: 100%;
    }
}

.buttons-div {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
        padding: 8px;
        margin-left: 8px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        background-color: config.$primary-color;
    }
}