英文:

how to add a custom design to card component in Materia UI

问题

我是一个JavaScript开发者，我的兄弟要我为他的业务设计一个简单的页面。我对前端不是很擅长，所以我正在使用Material UI，并添加了一点点CSS。

我正在使用卡片组件创建一个表单，应该看起来像这样：点击这里查看图片描述

我的问题是，我不知道如何将标志（我有它的SVG和PNG版本）放在卡片上面。我应该只使用CSS吗？还是我应该如何使用MUI来实现这个？我甚至不知道从哪里开始查找。

英文:

So, im actually a javascript developer and my brother asked me to design a simple page for his business. Im not to good with frontend, so im using Material UI and pasting everything with a little bit of css.

Im doing a form with the card component, that should look like this: enter image description here

my problem is, I dont know how to put the logo (i have it in svg and png) above the card. Should i do it all with css? or how could i do this with MUI? I dont even know where to begin looking

答案1

得分: 1

只翻译代码部分：

要更改插入的标志，只需更改 "image" 中的相对路径。

    <CardMedia
            component="img"
            height="194"
            image="/static/images/cards/paella.jpg"
            alt="Paella dish"
          />
          
更多信息请参考 https://mui.com/material-ui/react-card/

无论使用 MUI 还是不使用 MUI，都将体验到样式背后相同的逻辑。在 MUI 中，您将使用 box、cardmedia 和 form。在 HTML 中，您将使用 div、img 和 form。

我建议您尝试使用 HTML 和 CSS。当您开始使用 React 或其他框架时，您开始使用组件库构建。这不是规则，只是一个建议。我制作了一个简单的没有使用 MUI 的示例来帮助您：

HTML：

```

CSS：

.formBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 10px;
  max-width: 200px;
  border: 1px solid;
  border-radius: 10px;
}

我建议您学习更多内容，请阅读：
https://www.w3schools.com/html/html_forms.asp

并寻找 Styled Components 和 JSS/TSS，也许您会喜欢它。

<details>
<summary>英文:</summary>

To change insert the logo, just change the relative path in &quot;image&quot;.

    &lt;CardMedia
            component=&quot;img&quot;
            height=&quot;194&quot;
            image=&quot;/static/images/cards/paella.jpg&quot;
            alt=&quot;Paella dish&quot;
          /&gt;

See more in https://mui.com/material-ui/react-card/ 

With and without MUI, you will experience the same logic behind the style. In the MUI, you&#39;ll use box, cardmedia, and form. In html you will use div, img and form.

I suggest you to try using HTML and CSS. When you start with React or another framework, you start building using component libraries. It&#39;s not a rule, it&#39;s just a suggestion. I made a simple example without MUI to help you:

HTML: 

<div class="formBox">
<img
src="https://logodownload.org/wp-content/uploads/2014/09/google-logo-1.png"
width="100px"
height="auto"
/>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

CSS:

.formBox {
display: flex;
flex-direction: column;
align-Items: center;
padding: 20px;
gap: 10px;
max-width: 200px;
border: 1px solid;
border-radius: 10px;
}

I suggest you to learn more reading: 
https://www.w3schools.com/html/html_forms.asp

And look for Styled Components and JSS/TSS, maybe you like it.

</details>