Блог

Главная - Вопросы по программированию - Как применить новый css при изменении текста

Как применить новый css при изменении текста

#javascript #reactjs #react-hooks #next.js

#javascript #reactjs #реагирующие хуки #next.js

Вопрос:

Я могу изменить текст с помощью useState(), обратившись за помощью по динамическому обновлению CSS измененного текста.

JS:

 const [verifyAttendance, setViewAttendance] = useState("Verify Class Attendance")

<div className="verify-class-attendance">
  <span onClick={() => setViewAttendance('View Attendance')}>{verifyAttendance}</span>
  <ForwardArrow />
</div>

CSS:

 verify-class-attendance {
     background-color: #f8f8f8;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 51px;
     font-size: 12px;
     font-weight: 600;
     color: #fc8b4c;
     letter-spacing: 0.5px;
     padding-left: 35px;
     padding-right: 35px;
     position: relative;
     top: -16px;
     margin-bottom: 2px;
 }

Комментарии:

1. Вы можете передать className в качестве реквизита

2. В зависимости от состояния, присвоите компоненту, который вы хотите стилизовать, другое имя класса. Таким образом, вы сможете изменить стиль

3. Примечание: перед селектором в вашем CSS отсутствует буква a . : .verify-class-attendance .

Ответ №1:

Вы могли бы использовать className в качестве состояния

 const [verifyAttendance, setViewAttendance] = useState("Verify Class Attendance")
const [dynamicClassName, setDynamicClassName] = useState(null)

useEffect(() => {
  setDynamicClassName({
    'View Attendance': 'view-attendance',
    'Verify Class Attendance': 'verify-class-attendance'
  }[verifyAttendance])
}, [verifyAttendance])

<div className={dynamicClassName}>
  <span onClick={() => setViewAttendance('View Attendance')}>{verifyAttendance}</span>
  <ForwardArrow />
</div>

Ответ №2:

Вы могли бы сделать :

 <div className=`${booleanState} ? "verify-class-attendance" : "other-css"`></div>

Вы бы использовали новое состояние так же, как и с предыдущим