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

Question

我需要更改焦点输入的边框颜色。 我使用样式化组件和 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;

当我点击/关注它时，边框不会改变颜色。 帮助表示赞赏！

Answer 1

您需要为此禁用outline ：

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

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

Answer 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