删除样式组件输入周围的填充
删除样式组件输入周围的填充
提问于 2020-11-25 08:51:00
目标：移除色块周围不可见的填充，这样颜色就能填充整个容器。
我试着用所选的颜色填充整个包装。但是，在输入字段上似乎有不可见的填充：
import React, { useState } from "react";
import styled from "styled-components";
import "./styles.css";
const Container = styled.span`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
border-radius: 4px;
margin: 0px;
padding: 0px;
input[type="color"] {
border: 1px solid var(--main-grey);
outline: none;
border-radius: 8px;
width: 50%;
margin-left: 5px;
font-size: 12px;
font-family: Poppins;
padding: 0px;
-webkit-appearance: none;
width: auto;
height: auto;
cursor: pointer;
background-color: white;
margin:
&::-webkit-color-swatch-wrapper {
margin:-100px;
padding: 0px;
border: none;
overflow: none;
}
&::-webkit-color-swatch {
padding: 18px;
border:none;
border-radius: 8px;
margin: 0px;
}
}
input[type="text"] {
border: 1px solid var(--main-grey);
outline: none;
border-radius: 8px;
width: 50%;
margin-left: 5px;
padding-left: 12px;
margin-top: 0px;
font-size: 14px;
font-family: Poppins;
}
`;
const ColorPicker = (props) => {
return (
<Container>
<div className="color__pickerWrapper">
<input type="color" {...props} />
<input type="text" {...props} />
</div>
</Container>
);
};
export default function Color() {
const [state, updateState] = useState("#FFFFFF");
const handleInput = (e) => {
updateState(e.target.value);
};
return (
<div className="App">
<ColorPicker onChange={handleInput} value={state} />
</div>
);
}我认为输入周围有一些看不见的填充物。然而，我尝试了0px保证金和0px填充，但它仍然没有解决问题。也许这是一个关于样式组件的问题？
回答 1
Stack Overflow用户
发布于 2022-11-20 20:24:21
这不是一个优雅的解决方案，它可能会在其他部分带来一些问题，而这些问题都是你想要出现的。
不过，如果您想强行删除它们，请在公用文件夹中的index.html文件中添加以下代码，在头结束后，在身体启动之前：
<style>
* {
margin: 0 !important;
padding: 0 !important;
}
</style>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65009221
复制相关文章
点击加载更多
相似问题
删除元素周围的填充
文本输入周围神秘的“填充”
删除输入元素上addonBefore和addonAfter周围的额外填充
在JQuery移动版中删除输入周围的边框填充
样式组件中子组件输入焦点的样式父组件-组件
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
