我以前用 react native 写过应用程序,我即将开始我的第一个 react 项目。我注意到一个名为 Styled Components 的工具:https ://www.styled-components.com/docs/basics#motivation
但是,我看不到它有任何明显的好处,除了我可以在样式定义中进行媒体查询,所有这些都与我的组件在同一个文件中。
但是可以说我有这个按钮:
import React from 'react';
const StyledButton = ({ children }) => {
return (
<button type="button" style={styles.button}>
{ children }
</button>
);
}
const styles = {
button: {
backgroundColor: '#6BEEF6',
borderRadius: '12px',
border: 'none',
boxShadow: '0 5px 40px 5px rgba(0,0,0,0.24)',
color: 'white',
cursor: 'pointer',
fontSize: '15px',
fontWeight: '300',
height: '57px',
width: '331px',
}
}
export default StyledButton;
在 styled-components 中写这个会有什么不同?是否只有我的某些样式依赖于某些props
样式组件闪耀的情况?
例如,这在反应中不起作用:
const StyledButton = ({ children, primary }) => {
return (
<button type="button" style={[styles.button, { color: primary ? 'green' : 'red' }]}>
{ children }
</button>
);
}