Q1. 버튼 색상을 바꿨는데 왜 원래 색으로 돌아오나요?
theme.json 파일에서 styles.elements.button.color 값이 지정되어 있으면, 워드프레스는 버튼에 자동으로 has-accent-background-color, has-bg-color 같은 클래스를 붙입니다. 이 클래스는 !important 속성과 함께 CSS가 적용되어, 나중에 만든 변형 스타일보다 항상 우선합니다.
결과적으로, 버튼 모양은 바뀌어도 색상은 변하지 않게 됩니다.
Q2. 이 문제를 가장 간단하게 해결하려면?
theme.json의 해당 항목을 제거하거나 공백 객체로 둡니다.
예를 들어 아래처럼 처리하면 됩니다.
"elements": {
"button": {}
}이렇게 하면 워드프레스가 기본 색상을 강제하지 않으므로, 변형 스타일(is-style-rect-outline 등)의 CSS만 적용됩니다.
Q3. 기본 색상은 유지하면서 변형 스타일만 다르게 하고 싶다면?
변형 CSS 선택자를 더 구체적으로 지정하거나 !important를 사용합니다. 예를 들어:
.wp-block-button.is-style-rect-outline .wp-element-button {
background-color: transparent !important;
color: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
}이렇게 하면 theme.json 기본 색보다 변형 스타일이 우선 적용됩니다.
Q4. 이미 만들어둔 버튼이 색을 유지하는 이유는?
편집기에서 색상을 직접 지정하면 인라인 style 속성으로 저장됩니다. 인라인 스타일은 어떤 CSS보다 우선하므로, 변형 스타일을 바꿔도 색상이 그대로 남습니다.
이럴 때는 “색상 → 기본값으로” 초기화 후 스타일 변형을 적용해야 합니다.
Q5. border-radius(모서리 둥글기)도 안 바뀌는 이유가 있나요?
마찬가지입니다. theme.json에서 styles.elements.button.border.radius가 지정되어 있으면 모든 버튼에 강제 적용됩니다.
이 경우도 비워두면 변형 스타일의 둥근 모양, 사각 모양 등이 정상 작동합니다.
정리
- theme.json에서 버튼 기본 스타일을 비워두면 변형 스타일이 자유롭게 작동합니다.
- 기본값을 유지하려면 변형 CSS에서 더 구체적으로 지정하거나
!important를 사용합니다. - 이미 색상을 지정한 버튼은 초기화 후 다시 변형을 적용해야 합니다.
이것이 “버튼 색상 변형이 안 먹는 이유”의 근본적인 원인입니다.
