更改输入组件键入区域线颜色的默认颜色

Question

您知道如何更改input component输入区域线颜色的默认颜色吗？我无法找到任何SasS variable或自定义方式来做到这一点。

这是the Plunker

 <ion-item>
    <ion-input type="password" placeholder="Password Input"></ion-input>
  </ion-item>

Answer 1

查看离子输入sass文件（https://github.com/ionic-team/ionic/blob/master/src/components/input/input.scss）

您应该只能编辑// Third party. import React, { Component } from 'react'; import { Provider } from 'react-redux'; // App modules import setupStore from './utils/setupStore'; //This is the trick // Assets Actions const store = setupStore(); //==> Here calling the function inside setupStore file // App component. import App from './App'; export default class Root extends Component { render() { return ( <Provider store={store}> <App /> </Provider> ) } } 变量

Answer 2

将以下内容添加到home.page.scss：

ion-item {
  box-shadow: inset 0 -1px 0 0 red;
  border-bottom: none;
}

重要的是输入不是边框而是包装离子项。 如果您还想在输入聚焦时更改边框：

ion-item.input-has-focus {
  box-shadow: inset 0 -1px 0 0 green;
}

Answer 3

刚刚添加了以下scss以更改默认区域颜色和边框颜色

.list-md .item-input {
      background:#ccc;
      border-bottom-color:black;

      &.item-input-has-focus:last-child,
      &.input-has-focus:last-child {
        background:#fff;
        border-bottom-color:red;
        box-shadow: inset 0 -1px 0 0 red;
      }
 }

工作Demo

Answer 4

您可以尝试添加

ion-item:not(.error) .item-inner {
  border-color: deeppink !important; // Lines will be pink
}

在 app.scss 文件或任何其他放置＆＃34; global＆＃34;的文件中适合您应用的风格。

编辑：＆＃34; ：not（.error）＆＃34;此处添加的部分应防止输入时出现验证错误时显示粉红色的线条。