如何使用样式组件更改焦点上的边框颜色答案

【问题标题】：How to change border color on focus using styled-components如何使用样式组件更改焦点上的边框颜色
【发布时间】：2020-10-22 05:28:40
【问题描述】：

我需要更改焦点输入的边框颜色。我正在使用样式组件和 React：

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const StringInput = styled.input `
  border: 1px solid black;
  border-radius: 4px;
  padding: 6px 6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  &:focus {
    border-color: red;
    transition: border-color 0.3s ease-in-out;
  }
`;

class Tst extends React.Component {
  render = () => {

    return ( <
      StringInput / >

    );
  };
}

export default Tst;

当我点击/关注它时，边框不会改变颜色。感谢您的帮助！

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您需要为此禁用outline：

const StringInput = styled.input`
  border: 1px solid black;
  &:focus {
    outline: none;
    border-color: red;
  }
`;

const App = () => {
  return <StringInput />;
};

【讨论】：

【解决方案2】：

问题出在大纲属性上。

import React from "react";
import styled from "styled-components";

const StringInput = styled.input`
  border: 1px solid black;
  border-radius: 4px;
  padding: 6px 6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  &:focus {
    border-color: red;
    transition: border-color 0.3s ease-in-out;
    outline: 0;
  }
`;

class Tst extends React.Component {
  render = () => {
    return <StringInput />;
  };
}

export default Tst;

sadbox 的链接是https://codesandbox.io/s/loving-booth-icboz?file=/src/App.js:0-479

【讨论】：