样式组件不工作的背景颜色

Question

我知道这是一个超级基本的问题但是我无法在渲染时将背景或其他样式应用到我的页面尽管我的其他道具显示:

AppStyles.js

import styled from 'styled-components'
const StyledContainer = styled.div`
className = ${(props)=>props.className}
id = ${(props)=>props.id}
background-color: grey;
`
export {
StyledContainer
}

App.js

import { StyledContainer } from './AppStyles'
import { useId } from 'react-aria'
import { isMobile } from 'react-device-detect';
function App() {
const id = useId()
const appClassName = isMobile ? 'container-Mobile' : 'container-Desktop'
return (
<StyledContainer id={id} className={appClassName}>
<>
testing
</>
</StyledContainer>
);
}
export default App;

似乎不能在我的一些本地设置中工作，非常奇怪。

Answer 1

主要的问题是你没有像设置样式那样设置属性。做一个重构，使它看起来像这样。

const StyledContainer = styled.div.attrs(props => ({
className: props.className;
id: props.id';
}))`
background-color: grey;
`;

最好在每个属性后面加上分号，这样有样式的组件就知道每个属性是什么。如果你看检查，我想你会看到只有className被添加，其余的都没有