CSS 元素在使用 redux 时不起作用

Question

有一个使用react js和redux的简单笔记应用程序

我有一个记事卡组件 css 属性：

NoteItem.js

const NoteItem = ({ text, date, index }) => {
  const dispatch = useDispatch();

  const deleteNoteItem = () => {
    dispatch(deleteNote(index));
  };

  return (
    <div className={"note"}>
      <span>{text}</span>
      <div className="note-footer">
        <small>{date}</small>
        <MdDeleteForever
          className={"delete-icon"}
          size={"1.3em"}
          onClick={deleteNoteItem}
        />
      </div>
    </div>
  );
};

CSS 属性

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2&display=swap');

body {
  margin: 0;
  font-family: 'M PLUS 2', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark-mode {
  background-color: black;
}

.dark-mode h1 {
  color: white;
}

.container {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 100vh;
}

.notes-list {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(
        auto-fill,
    minmax(250px, 1fr)
    );
}

.note.new {
  background-color: #67d7cc;
}

textarea {
  border: none;
  resize: none;
  background-color: #67d7cc;
}

textarea:focus {
  outline: none;
}

.save {
  background-color: #e1e1e1;
  border: none;
  border-radius: 15px;
  padding: 5px 10px 5px 10px;
}

.save:hover {
  background-color: #ededed;
  cursor: pointer;
}

.note {
  background-color: #fef68a;
  border-radius: 10px;
  padding: 1rem;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: pre-wrap;
}

.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delete-icon {
  cursor: pointer;
}

.search {
  display: flex;
  align-items: center;
  background-color: rgb(233, 233, 233);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 1.5em;
}

.search input {
  border: none;
  background-color: rgb(233, 233, 233);
  width: 100%;
}

.search input:focus {
  outline: none;
}

NewItem.js

  const NewItem = () => {
    const [input, setInput] = useState("");

    const dispatch = useDispatch();

    const getCurrentDate = () => {
      const date = new Date();
      return `${date.getDate()}-${
        date.getMonth() + 1
      }-${date.getFullYear()}  ${date.getHours()}:${date.getMinutes()}`;
    };

    const add = () => {
      dispatch(
        addNote({
          text: input,
          date: getCurrentDate()
        })
      );

      setInput("")
    };

    return (
      <div className={"note new"}>
        <textarea
          rows={"8"}
          cols={"10"}
          placeholder={"Type to add a note..."}
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <div className={"note-footer"}>
          <small>{200 - input.length} remaining</small>
          <button className="save" onClick={add}>
            Save
          </button>
        </div>
      </div>
    );
};

如果我在卡片组件的 span 标签中硬编码文本，卡片看起来就像它应该的那样

但是如果我将创建新卡片的逻辑集成到 redux 组件中，那么卡片将以这种方式呈现：

可能是什么问题？我在这里没有找到类似的东西。提前致谢！

Answer 1

您的笔记 span 会自动在空格处中断以避免溢出。您似乎没有在第二个示例中放置任何空格，导致溢出。

要在跨度的边缘断开，请将 css 属性 overflow-wrap: break-word; 添加到您的注释中 class。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text#breaking_long_words

这是 fiddle 我测试了 https://jsfiddle.net/febargph/

中的变化

Answer 2

这是一个没有空格的长字符串在 <span> 中的表现。添加空格，它也会有所帮助 css 属性 word-break: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

CSS 元素在使用 redux 时不起作用

CSS elements do not work when using redux

javascript

css

reactjs

redux

redux-toolkit