我是样式组件的新手,我有点困惑。我们可以显示一些东西或向 styled-compoentns 添加功能吗?或者 styled-components 是我们只能应用 css 的组件
问问题
1156 次
3 回答
0
styled-components 主要用于应用 css。
因此,通常您会使用提供内容的包装器组件,并使用从 styled-components 获得的组件进行装饰。
有时,我发现当内容非常特定于组件时,使用.attrs构造函数进行传递很有用。children
const ResourceMissingError= styled.div.attrs({
children: 'This resource could not be found'
})`color: red`;
render(<ResourceMissingError />);
于 2019-10-03T04:04:27.647 回答
0
我们可以显示一些东西或向样式组件添加功能吗?
是的,样式化的组件可以像任何原生组件一样使用。因此,正如 HTML<button>
可用于显示某些内容一样,您可以使用样式按钮来执行此操作。见下文。
类似地,您可以像在原生组件中一样添加功能,例如通过监听点击事件。ColorfulButton
下面的演示通过处理其点击事件“添加”功能。
另请参阅颜色如何作为道具传递给ColorfulButton
via mycolor="green"
:
const ColorfulButton = styled.button`
display: inline-block;
color: ${props => props.mycolor || "blue"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
display: block;
`;
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = { text: "Learn JavaScript (click me)", done: true }
}
handleClick = e => {
this.setState({...this.state, done: !this.state.done});
}
render() {
return (
<div>
<ColorfulButton onClick={this.handleClick} mycolor="green">{this.state.text}</ColorfulButton>
<br />
{this.state.done ? 'Yes' : 'No'}
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="app"></div>
于 2019-10-03T04:15:35.627 回答
-1
您可以制作一个 CSS 文件并将其导入到您的不同组件中,例如在 CSS 中制作类,并在您的组件中将该类用作className=""
. 此外,您可以像这样引用内联 CSS,style={{}}
以确保在 React 内联 CSSfont-size
中写入属性名称。fontSize
每个属性名称中间有破折号的 CSS 属性,破折号将被删除,破折号后面的下一个字母将大写,并且属性值将在双引号或单引号中。
于 2019-10-03T04:26:17.077 回答