Fatal编程技术网
  • css/
  • Css 不应用带插值的样式化组件条件渲染

Css 不应用带插值的样式化组件条件渲染

css

Css 不应用带插值的样式化组件条件渲染,css,styled-components,Css,Styled Components,我为所选的项设置了以下样式化组件 ${(props) => props.selected && css` background-color: ${(props) => props.theme.colors.selectedColor}; `} 如果我跟着做，它会起作用 ${(props) => props.selected && css` background-color: lightblue; `} 但是，使

我为所选的
项设置了以下样式化组件


${(props) =>
  props.selected &&
  css`
  background-color: ${(props) => props.theme.colors.selectedColor};
 `}


如果我跟着做，它会起作用


 ${(props) =>
  props.selected &&
  css`
  background-color: lightblue;
  `}


但是，使用插值时，它不起作用。我尝试了以下方法，但不起作用


${(props) =>
  props.selected &&
  `
  background-color: ${(props) => props.theme.colors.selectedColor};
  `}



有什么原因吗？
你在插值一个函数。改为这样做：


${(props) =>
   props.selected &&
   css`
      background-color: ${props.theme.colors.selectedColor};
   `}