如何防止Safari更改样式？
第一张图片是样式呈现在页面呈现的瞬间在Safari上的显示方式，然后变为第二张图片中的样式。我以前没有这个问题，也不确定如何预防。 Chrome呈现正确。
我正在使用的堆栈是具有Material-UI库的nextjs（如果有区别）。
有什么想法吗？
import { withStyles } from '@material-ui/core/styles';
export default withStyles(theme => {
const colors = theme.palette.colors;
return {
hidden: {
display: 'none'
},
title: {
fontFamily: 'Roboto Condensed',
fontSize: 22,
margin: '15px 0 20px 0'
},
subTitle: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 300,
color: '#aaaaaa',
margin: '0 0 30px 0'
},
awardsCont: {
maxWidth: 340,
margin: '0px auto 48px auto'
},
awardCont: {
width: 70,
height: 95,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
margin: 'auto'
},
awardSelected: {
background: '#EBEBEB',
borderRadius: 3
},
awardIcon: {
height: 50,
width: 'auto',
transform: 'translate(-50%)',
marginLeft: '50%'
},
awardText: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 500,
color: '#aaaaaa'
},
good: {},
great: {
color: '#fcc73f'
},
perfect: {
color: '#a4aebc'
},
subtitleContainer: {
paddingLeft: 6
},
subTitle2: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 300,
color: '#b9b9b9',
// color: 'blue',
marginBottom: 10,
textAlign: 'center'
// [theme.breakpoints.up('lg')]: {
// textAlign: 'left',
// paddingLeft: 6
// }
},
tagsContainer: {
[theme.breakpoints.up('lg')]: {
width: '50vw',
margin: '0 auto'
},
[theme.breakpoints.up('md')]: {
width: '80%',
margin: '0 auto'
},
[theme.breakpoints.up('sm')]: {
width: '90%',
margin: '0 auto'
}
},
// tagsCont: {
// width: '100vw',
// boxSizing: 'border-box',
// padding: 8
// },
subTitle2: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 300,
color: '#aaaaaa',
marginTop: 40,
marginBottom: 10
},
comment: {
width: 'calc(100% - 32px)',
height: 100,
margin: '0 16px 20px 16px',
padding: 8,
boxSizing: 'border-box',
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: 16,
color: '#A9A9A9',
background: 'white',
boxShadow: '0px 2px 6px rgba(46, 46, 46, 0.2)',
borderRadius: 5,
border: 'none',
'&:focus': {
outline: 'none',
background: 'white',
fontWeight: 300,
color: '#A9A9A9'
},
'&:active': {
outline: 'none',
background: 'white',
color: '#A9A9A9',
fontWeight: 300
},
[theme.breakpoints.up('lg')]: {
margin: 0,
width: '100%'
}
},
submitBtn: {
width: 140,
height: 45,
margin: '0 10px 40px auto',
fontFamily: 'Roboto',
fontSize: 16,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0px 4px 8px rgba(46, 46, 46, 0.1)',
background: '#E0E0E0',
borderRadius: 5,
color: 'white',
[theme.breakpoints.up('lg')]: {
margin: '8px 0 0 auto'
}
},
clickable: {
background: '#FF9649',
cursor: 'pointer'
},
//prev styling below
groupNotSelected: {
cursor: 'pointer',
margin: '0 10px',
fontFamily: 'Roboto Condensed',
fontSize: '16px',
fontWeight: '300',
letterSpacing: '0.05em',
color: '#AAAAAA'
},
purpose: {
cursor: 'pointer',
margin: '0 10px',
padding: '3px 10px',
borderRadius: 5,
fontFamily: 'Roboto Condensed',
fontWeight: 'bold',
letterSpacing: '0.05em',
fontSize: '16px',
backgroundColor: '#FFEAE4',
color: '#D24207',
cursor: 'pointer'
},
features: {
cursor: 'pointer',
margin: '0 10px',
padding: '3px 10px',
borderRadius: 5,
fontFamily: 'Roboto Condensed',
fontWeight: 'bold',
letterSpacing: '0.05em',
fontSize: '16px',
backgroundColor: '#FFEFDE',
color: '#FF982A'
},
location: {
cursor: 'pointer',
margin: '0 10px',
padding: '3px 10px',
borderRadius: 5,
fontFamily: 'Roboto Condensed',
fontWeight: 'bold',
letterSpacing: '0.05em',
fontSize: '16px',
backgroundColor: '#FFF4D7',
color: '#F4C95D'
},
body: {
width: '98%',
margin: '0 auto',
[theme.breakpoints.up('md')]: {
width: '80%'
},
[theme.breakpoints.up('lg')]: {
width: '60%'
}
},
filterSelectionGroup: {
cursor: 'pointer',
padding: '0 8px'
},
filter: {
display: 'flex',
alignItems: 'center',
height: 58,
textAlign: 'center',
fontFamily: 'Roboto',
fontWeight: '300'
},
// card: {
// boxSizing: 'border-box',
// paddingLeft: 20,
// cursor: 'pointer',
// display: 'flex',
// alignItems: 'center',
// justifyContent: 'left',
// height: 58,
// fontFamily: 'Roboto',
// fontWeight: 300,
// fontSize: '16px',
// borderRadius: 5,
// backgroundColor: '#FFFFFF',
// color: '#AAAAAA',
// boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);',
// [theme.breakpoints.up('md')]: {
// borderRadius: 15,
// height: 110,
// fontSize: 18
// }
// },
card: {
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
backgroundColor: '#FFFFFF',
color: '#AAAAAA',
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
purposeSelected: {
color: '#D24207 !Important',
backgroundColor: '#FFEAE4',
zIndex: 20,
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
featureSelected: {
color: '#FF982A !Important',
backgroundColor: '#FFEFDE',
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
locationSelected: {
color: '#F4C95D !Important',
backgroundColor: '#FFF4D7',
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
firstSubTitle: {
margin: 0,
fontFamily: 'Roboto condensed',
fontWeight: 'bold',
fontSize: '14px',
color: '#AAAAAA',
textAlign: 'left'
},
icon: {
justifySelf: 'start',
marginRight: 12
},
submit: {
position: 'fixed',
bottom: 70,
margin: '0 auto',
[theme.breakpoints.up('md')]: {
position: 'relative',
marginTop: 90,
marginBottom: -45
}
},
submitButtonIcon: {
width: 'auto',
height: 15,
margin: 'auto 0 auto 5px'
},
buttonsContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto'
},
locationContainer: {
display: 'flex',
alignItems: 'center',
marginLeft: -20,
[theme.breakpoints.down('xs')]: {
maxWidth: '80%',
padding: 0
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
padding: 0
}
},
input: {
boxShadow: '0px 4px 8px rgba(46, 46, 46, 0.1);',
border: 'none',
width: '100%',
height: 50,
marginLeft: -25,
marginRight: -35,
borderRadius: 5,
color: '#AAAAAA',
fontSize: 16,
fontWeight: 300,
fontFamily: 'Roboto',
textAlign: 'center'
},
locationIcon: {
zIndex: 1,
height: 'auto',
width: 35,
color: '#F4C95D',
margin: 'auto',
marginRight: -20
},
arrowIcon: {
color: '#F4C95D'
},
blueLineSelected: {
color: '#3C91E6 !Important',
backgroundColor: '#ECF5FF !Important'
},
redLineSelected: {
color: '#EA2B1F !Important',
backgroundColor: '#F9E3E2 !Important'
},
brownLineSelected: {
color: '#61210F !Important',
backgroundColor: '#F9EBE7 !Important'
},
pinkLineSelected: {
color: '#CA2E55 !Important',
backgroundColor: '#FCF2F5 !Important'
},
greenLineSelected: {
color: '#00A878 !Important',
backgroundColor: '#EEFFFA !Important'
},
orangeLineSelected: {
color: '#FF6201 !Important',
backgroundColor: '#FFF6F0 !Important'
},
trainContainer: {
borderRadius: 5,
[theme.breakpoints.up('md')]: {
borderRadius: 15
}
},
subContainer: {
zIndex: 1,
height: 'auto',
background: 'none'
},
brownLineContainer: {
marginBottom: 50
},
subTag: {
height: 10,
padding: 10,
margin: 8,
background: 'white',
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);',
borderRadius: 5,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: 16,
color: '#AAAAAA'
},
successMessage: {
// position: 'absolute',
// top: 0,
width: '100%',
boxSizing: 'border-box',
padding: '10px 30px',
textAlign: 'center',
fontSize: 16,
fontWeight: 300,
fontFamily: 'Roboto',
lineHeight: '150%',
color: '#4a8a4a',
background: '#ccebc9'
}
};
});
2 个答案:
答案 0 :(得分：0)
考虑此渲染问题时，它似乎是样式覆盖问题。我想您已经将.container类的材料用于html布局，然后您通过更改其默认值来覆盖.container类中的样式。网页会在初始绘制时显示其原始样式值，并且需要几秒钟的时间来覆盖您的默认样式。这可能是您的布局随时间变化的原因。
答案 1 :(得分：0)
我有一个叫两次的类名。它在Chrome浏览器中没有破坏任何东西，但在Safari浏览器中却没有破坏。一旦删除第二个类变量，样式就可以正常工作。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？