问题描述
我正在使用来自语义UI的输入来创建搜索输入：
import React from 'react';
import { Input } from 'semantic-ui-react';
export default ({ placeholder,onChange }) => {
return (
<Input
icon="search"
icon={<img src={searchIcon} />}
iconPosition="left"
placeholder={placeholder}
onChange={onChange}
/>
);
};
它有效并且看起来不错。
问题是我需要用svg图像更改其图标。因此svg会导入文件中，并按以下方式使用：
import React from 'react';
import { Input } from 'semantic-ui-react';
import searchIcon from '../../assets/icons/searchIcon.svg';
export default ({ placeholder,onChange }) => {
return (
<Input
icon={<img src={searchIcon} />}
iconPosition="left"
placeholder={placeholder}
onChange={onChange}
/>
);
};
问题在于，它将图标放置在输入的外部并在其右侧。 它应该在输入的内部，并且在左侧。
添加svg之后没有样式更改，为什么它与原始图标的位置不同？
解决方法
当我们通过属性“ icon”添加一些图标时，最有可能的语义UI添加了特殊样式。语义用户界面反应不支持自定义图标。 ：，（
在类型声明中，我们可以阅读：
class Program
{
static void Main(string[] args)
{
InsertAddresses();
Console.ReadLine();
}
static void InsertUsers()
{
var users = new List<User> {
new User() { UserName ="Remzi",Email = "[email protected]"},new User() { UserName ="Xezri",Email = "[email protected]"},new User() { UserName ="Nurane",Email = "[email protected]"}
};
using (var db = new Context())
{
db.Users.AddRange(users);
db.SaveChanges();
}
}
static void InsertAddresses()
{
var addresses = new List<Address> {
new Address(){FullName = "Remzi Balakisiyev",Title = "Ev addressi",Body = "Masalli",UserID=1},new Address(){FullName = "Remzi Balakisiyev",Title = "Ish addressi",Body = "Baki",new Address(){FullName = "Xezri Balakisiyev",UserID=2},new Address(){FullName = "Nurane Tarverdiyeva",Body = "Naxcivvan",UserID=3},new Address(){FullName = "Rena Heyderova",Body = "Xachmaz",UserID=5},new Address(){FullName = "Memmed Bedelov",Body = "Sumqayit",UserID=4}
};
using (var db = new Context())
{
db.Addresses.AddRange(addresses);
db.SaveChanges();
}
}
class Program
{
static void Main(string[] args)
{
InsertAddresses();
Console.ReadLine();
}
static void InsertUsers()
{
var users = new List<User> {
new User() { UserName ="Remzi",UserID=4}
};
using (var db = new Context())
{
db.Addresses.AddRange(addresses);
db.SaveChanges();
}
}
我的主张：在CSS中添加一些样式，例如sandbox
/** Optional Icon to display inside the Input. */icon?: any | SemanticShorthandItem<InputProps>我通过传递一个自定义组件使其工作，在该组件中svg图像由具有i类的icon标签包裹：
const CustomIcon = (
<i className="icon">
<img width={38} height={38} src={searchIcon} />
</i>
);
const App = () => {
return (
<Input icon={CustomIcon} iconPosition="left" placeholder="placeholder" />
);
};
此方法的好处是您可以更改iconPosition，而不会破坏此方法的样式。
要提供更多上下文，该图标将显示在正确位置的原因是此选择器应用了.ui.icon.input>i.icon样式。因为它期望使用i标签，所以如果您不在i标签之间包裹图像，则样式将不会应用。