You want a button to change its background color to blue when primary={true} and red when primary={false}. Which styled-components syntax is correct?

Đáp án đúng: "const Button = styled.TouchableOpacity` background-color: ${props => props.primary ? 'blue' : 'red'};". Trong styled-components, template literal có thể chứa nội suy (interpolation) đặt trong cặp dấu đô la và ngoặc nhọn; nếu thứ được nội suy là một hàm thì thư viện gọi hàm đó với props hiện tại mỗi lần render, nên props.primary bằng true cho 'blue', bằng false cho 'red', và giá trị được chèn vào thuộc tính background-color. "const Button = styled.TouchableOpacity` background-color: props.primary ? 'blue' : 'red';" sai vì biểu thức nằm trần trong chuỗi CSS, không được bọc nội suy, nên JavaScript không đánh giá nó và CSS nhận về một giá trị vô nghĩa. "

<Button style={
  {
    backgroundColor: primary ? 'blue' : 'red'
  }
}
/>

" là inline style thông thường chứ không phải cú pháp styled-components, và biến primary ở đó cũng không lấy từ props. "<Button primaryColor /> " chỉ truyền một prop boolean tên primaryColor, không định nghĩa màu nào cho nút.