我尝试了How to change default body color of materialize datetimepicker?中提出的解决方案,但是这些都不再起作用了,也许是因为更新到1.0.0(该问题来自2018年),也许类名现在已经不同了,但是我没有发现任何东西。这是我的代码段。
.picker__box{
background-color: #CCC !important;
}
.picker__date-display, .picker__weekday-display{
background-color: #CCC !important;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="row">
<h2>Generic form</h2>
</div>
<div class="row">
<form action="" class="col s12">
<div class="card-panel">
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="Name" id="name">
<label for="name">Name</label>
</div>
<div class="input-field col s6">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="email" name="Email" id="email" placeholder="Email" class="validate" required>
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="text" class="datepicker" name="date" id="date">
<label for="date">Date</label>
</div>
</div>
<div class="right-align">
<button class="btn purple darken-3" type="submit">
<i class="material-icons left">send</i>
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
M.AutoInit();
});
</script>
</body>
</html>
答案 0 :(得分:1)
您正在寻找类.datepicker-date-display
,但使用Sass source code可能会更有效。您可以更改each variable(例如$datepicker-date-bg
)并生成干净的代码而不会被覆盖。
答案 1 :(得分:0)
基于@ Jax-p的出色且正确的答案,Sass之所以在以后的工作中更受益的原因是因为设置了Materialize。
主题有两种主要颜色,分别在第37和41行的variables.scss中设置:
$primary-color: #3C3842 !default;
$secondary-color: #C59F6A !default;
主色是用于导航栏的粉红色,青色是用于按钮的绿色。您会注意到,在所有时间中都始终出现青绿色(按钮,日期选择器,输入等),这是因为几乎每个元素都从这两个基本颜色变量中获取其颜色。在这种情况下,蓝绿色是第二色。进一步深入到variables.scss,我们看到日期选择器被设置为第二(茶色)颜色:
$datepicker-date-bg: $secondary-color !default;
这是样式流到元素的方式。因此,尽管您可以使用.datepicker-date-display
覆盖单个datepicker实例,但蓝绿色将保留在样式表的其余部分中,这将破坏设计的一致性。
如果您决定将主题颜色设置为银色,则可以节省时间在Variables.scss中将css换成一行,然后保存,然后将生成的materialize.css文件作为默认样式表:
$secondary-color: #CCC !default;
值得深思,而Sass很棒+1! :)